왼쪽 요소를 줄 바꿈하면서 오른쪽 요소를 같은 줄에 유지하는 방법은 무엇입니까?

Question

나는이 바이올린으로 연주 해왔다 ->http://jsfiddle.net/ArfUA/10/.

HTML이 왼쪽에있는 텍스트가 될 때 오른쪽에있는 번호가 같은 줄에 남아 있도록

.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; 
} 

'...'공간이 가득 차면

<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.

왼쪽 텍스트를 '...'이 아닌 다음 줄로 줄 수 있는지 궁금합니다. 나는 그것을 시도하지만 그것을 작동하지 않습니다. 아무도 이것을 달성하기 위해 올바른 방법을 가르쳐 줄 수 있습니까?

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>