两个文本块并排在一起，必要时截断并添加省略号到一个块中。
两个文本块并排在一起，必要时截断并添加省略号到一个块中。
提问于 2014-08-28 01:31:22
我有一个%单元格宽度的表。表是NgGrid in AngularJS (基于div)。
这个单元格中有一个不同长度的文本(或链接)。还有几枚带浮标的徽章。
在这弹琴示例中，有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>回答 1
Stack Overflow用户
回答已采纳
发布于 2014-08-28 01:58:51
如果有可能重新排列标签和文本的顺序，那么下面的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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25545408
复制相关文章
相似问题
腾讯云开发者
