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 可用的空间，在第一个跨度中添加省略号，这样我最终会得到如下内容：

这是一个很长的文本 suffix 1 suffix 2 // 如果有足够的空间可用于所有内容。

这是一个很长的... suffix 1 suffix 2 // 如果没有足够的空间可用于所有内容。

这是一个 v... suffix 1 suffix 2 // 如果可用空间更少。

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

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

Answer 1

正如我所说，目前我发现的最佳解决方案是基于 Javascript 的。见：http: //jsbin.com/aregeq/4/edit

Answer 2

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

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

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