如何让正确的元素保留在同一行上,而左元素包装?
问题描述:
我一直在玩这个小提琴 - >http://jsfiddle.net/ArfUA/10/。如何让正确的元素保留在同一行上,而左元素包装?
HTML
<div class="container">
<span class="short">1234</span>
<span class="long ellipsis">LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord</span>
</div>
<br />
<hr />
<br />
<div class="container">
<span class="short">12345678910</span>
<span class="long ellipsis">LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord</span>
</div>
<br />
<hr />
<br />
<div class="container">
<span class="short">1234</span>
<span class="long ellipsis">LongLongLongLongWord</span>
</div>
CSS
.container {
width:400px;
border:dashed 1px;
overflow:hidden;
}
.short {
float: right;
background: yellow; /*just for demo; */
}
.long
{
display: block;
background: pink; /*just for demo; */
}
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
这让停留在同一行右边的数字,而在左边的文字变成“...”当空间已满。
我想知道是否可以将左边的文本换成下一行而不是成为'...'。我试了一下,但它不起作用。任何人都可以指出我实现这个目标的正确方法吗?
答
您可以使用flexbox和word-break: break-all来达到您想要的效果。
.container {
width: 400px;
border: dashed 1px;
overflow: hidden;
display: flex;
}
.short {
background: yellow;
order: 1;
flex-shrink: 0;
}
.long {
background: pink;
word-break: break-all;
flex-grow: 1;
}
<div class="container">
<span class="short">1234</span>
<span class="long ellipsis">LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord</span>
</div>
<br />
<hr />
<br />
<div class="container">
<span class="short">12345678910</span>
<span class="long ellipsis">LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord</span>
</div>
<br />
<hr />
<br />
<div class="container">
<span class="short">1234</span>
<span class="long ellipsis">LongLongLongLongWord</span>
</div>