html - 左侧元素环绕时，如何使右侧元素保持在同一行？

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

关于html - 左侧元素环绕时，如何使右侧元素保持在同一行？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46822902/