左の要素が折り返している間、右の要素を同じ行に残す方法は？

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>