在将空白改为nowrap后，宽度变得太宽了。我希望文本只在一行结束，当宽度达到时......结束，但不知道为什么它会把宽度推出来。宽度似乎没有得到遵守。设置最大宽度似乎是可以的，但它的响应不流畅，感觉不像是正确的方式。
有什么想法吗？谢谢你的帮助-解释一下这里发生了什么会很棒!
* {box-sizing:border-box;}
.listingItem {
background: #f0f0f0;
margin: 10px 0;
padding: 10px 20px;
float: left;
position: relative;
}
.listingItemData {
float: left;
width: 100%;
}
.listingDisplayLeft {
width: 35%;
float: left;
padding-right: 20px;
}
.listingDisplayRight {
width: 65%;
float: left;
}
.listingItemText {
float: left;
overflow: hidden;
width: 100%;
}
.listingItemTextDetails {
background: pink;
width: 100%;
float: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.listingItemText .listingItemTextButton {
background: #375db5;
color: #fff !important;
padding: 10px;
border-radius: 5px;
margin-top: 10px;
float: left;
display: block;
font-size: 17px !important;
}<div class="listingItem">
<input type="hidden" class="listingItemData" value="32142|32142|t|f">
<div class="listingItemData">
<div class="listingDisplayLeft"><a href="/listings/lost-pets/view/32142/test-tiger-demo/" title="View full details"><img src="http://assets.worldwildlife.org/photos/907/images/story_full_width/sumatran-tiger-hero_92514619.jpg?1345581518" style="width:100%;max-width:1024px" alt=""></a></div>
<div class="listingDisplayRight">
<div class="listingItemText">
<h3>
<a href="/listings/lost-pets/view/32142/test-tiger-demo/" title="View full details">test tiger demo</a>
</h3>
<div class="listingItemTextDetails">
i lost my pet tiger. i lost my pet tiger. i lost my pet tiger. i lost my pet tiger. i lost my pet tiger. i lost my pet tiger. i lost my pet tiger. i lost my pet tiger. i lost my pet tiger. i lost my pet tiger.
<br>
<br>i lost my pet tiger. i lost my pet tiger. i lost my pet tiger. i lost my pet tiger. i lost my pet tiger.
</div>
<a class="listingItemTextButton" href="/listings/lost-pets/view/32142/test-tiger-demo/" title="View full details">More information</a>
</div>
</div>
</div>
</div>
2条答案
按热度按时间bvjxkvbb1#
您没有定义外部容器的宽度。因此它将被忽略：P
指定宽度为100%（见示例），然后你就可以了，所以内部div的宽度是外部容器宽度的100%。
o8x7eapl2#
在父
.listingItemText上设置display: grid将限制宽度，而不会将宽度设置为精确的数字。请参见下面的示例。