如何让正确的元素保留在同一行上，而左元素包装？

Question

我一直在玩这个小提琴 - >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; 
} 

这让停留在同一行右边的数字，而在左边的文字变成“...”当空间已满。

我想知道是否可以将左边的文本换成下一行而不是成为'...'。我试了一下，但它不起作用。任何人都可以指出我实现这个目标的正确方法吗？

Answer 1

您可以使用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>