如何讓正確的元素保留在同一行上，而左元素包裝？

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>