将文本限制为 x 行并附加“...”答案

【问题标题】：Limit text to x number of lines and append '...'将文本限制为 x 行并附加“...”
【发布时间】：2013-04-30 19:28:29
【问题描述】：

我正在寻找一种 Javascript/jQuery + CSS 方法来将文本（例如产品名称）限制为 2 行。但访问者需要知道它已被截断，因此我需要在末尾附加“...”。

我最初想到的方法是将文本放在 1 行中，测量它的宽度并在文本达到 2 倍于包含 div 的宽度之前将其切断，但这似乎很棘手，因为每个字符可能需要计算其宽度而不是那个。

在这种情况下，将其限制为字符或单词的数量将不起作用 - 我希望每次都完全填充该 div 的 2 行，而不是有间隙。

有没有比使用等宽字体更好的方法来实现这一点？

【问题讨论】：

【解决方案1】：

由于您使用的是 jQuery，请尝试以下插件：

【讨论】：

嗯... ~600 LOC 并且对于这三个小点来说，外部依赖似乎有点过头了。这是一个大约 20 行的快速 POJS 解决方案。它需要一些工作，需要爬过兄弟姐妹并找到文本节点而不是做出假设，也许还有一些不错的事件处理，但我看不到这个增长超过 50 LOC...jsfiddle.net/HERuT
实际上看起来不错。但是 Autoellipsis（我选择的插件）是 barely 200 lines without comments，如果您已经在使用 jQuery，我会说这已经足够了。
Autoellipsis 对我来说确实看起来更干净，但我没有仔细观察它。我认为这类脚本困扰我的是对 jQuery 的感知需求。似乎当您在做这样的 DOM 密集型工作时，您不妨摆脱依赖关系，只需编写额外的事件处理代码或任何自己的东西……似乎这样的脚本不需要 99% 的 jQuery . Autoellipsis 显然看起来更适合成为 POJS 脚本。
仍然不清楚如何将 2 行 (!) 椭圆化... dotdotdot 控制高度，而不是行数，例如 ....

【解决方案2】：

我们可以为此使用 css：

.truncate {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block; /* for links */
}

【讨论】：