css - 将省略号添加到一组跨度中的第一个

Question

我有这样的东西:

<p id="container">
  <span id="t1">This could be a very long text </span>
  <span id="t2">&#160;suffix 1</span>
  <span id="t3">&#160;suffix 2</span>
</p>

我想做的是，根据 #container 的可用空间，将省略号添加到第一个跨度，这样我最终会得到如下内容:

This is a very long text suffix 1 suffix 2 // If enough space available for everything.

This is a very long... suffix 1 suffix 2 // If there is not enough space available for everything.

This is a v... suffix 1 suffix 2 // If there is even less space available.

如您所见，应始终保留后缀的空格，并且只有第一个跨度文本应应用省略号。

非常感谢您的提前帮助! ;-)

Answer 1

您可以使用 CSS 属性 text-overflow:ellipsis 完成此操作

#t1 {
  display:inline-block;
  text-overflow: ellipsis;
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
}

您可以在此处找到有关如何使用它的完整引用/教程: http://davidwalsh.name/css-ellipsis