我在一行有三个字段:
<div><span class="name">Blue Widgets Over Miami</span><span class="size"> large </span><span class="price">$9.99</span></div>
我希望.name和.size位于行的左侧,.price位于右侧,并且每个字段之间至少有一个空格。
不过,这里有个棘手的部分。如果屏幕真的很窄,我不希望div包装或溢出。相反,我希望.name-to-text溢出作为省略号。
div{background:#abcdef;white-space:nowrap}
.name{text-overflow:ellipsis}
.size{}
.price{float:right}
现在,如果屏幕很窄,那么.price会降到第二行(这是我不想要的),如果屏幕更窄,那么.name和.size会溢出div(这也是我不想要的),并且.name不会用省略号截断。
我做错什么了?
最佳答案
使用FlexBox:
div {
background: #abcdef;
display: flex;
}
.name {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.size {
margin: 0 .5em;
}
.price {
margin-left: auto;
}
<div>
<span class="name">Blue Widgets Over Miami</span>
<span class="size">large</span>
<span class="price">$9.99</span>
</div>
<br />
<div>
<span class="name">Blue Widgets Over Miami Blue Widgets Over Miami Blue Widgets Over Miami Blue Widgets Over Miami Blue Widgets Over Miami Blue Widgets Over Miami Blue Widgets Over Miami Blue Widgets Over Miami Blue Widgets Over Miami Blue Widgets Over Miami</span>
<span class="size">large</span>
<span class="price">$9.99</span>
</div>
关于html - 防止浮点换行,并在需要时强制文本溢出,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/39359114/