两个文本块并排，截断并在必要时将省略号添加到一个块

Question

我有一个％单元格宽度的表。该表是AngularJS中的NgGrid（基于div）。

此单元格中有不同长度的文本（或链接）。还有一些带浮动的徽章。

在this jsfiddle示例3个案例中：

1. 单元格中包含短文本的预期行为（希望注意文本应填充所有可用空间）
2. 长文字问题。文本应使用省略号截断，徽章应显示
3. 长文本的预期呈现。如果您尝试调整画布大小，您会看到此方法的问题（断线）

代码：

<p>1. Expected behavior with a short text</p>
<div class="container">
    <span class="text">short text</span>
    <span class="label">label</span>
</div>


<p>2. Problem with a long text</p>
<div class="container">
    <span class="text">long textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong text</span>
    <span class="label"></span>
</div>

<p>3. Expected result with a long text</p>
<div class="container">
    <span class="text example">long textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong text</span>
    <span class="label example">label</span>
</div>

Answer 1

如果可以重新排列标签和文本的顺序，那么以下CSS规则应该可以解决问题：

<div class="container">
    <span class="label">label</span>
    <span class="text">some very long text</span>
</div>

.container {
    /* nothing */
}
.label {
    float: right;
}
.text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Demo here