多行文本框的文字溢出省略号未生效

Question

为什么要做到这一点这么难：

• 固定高度的DIV，其中包含多行文本
• 如果文本太长而无法放入此框中，则在末尾显示“...”
• 不要切断单词！

以下 JSFiddle显示了演示。

问题：

• 如何使“...”也出现在Firefox、IE、Edge和Safari中？目前它只在Chrome中起作用（请参见JSFiddle中的.chrome css）
• 如何确保只能切割空格而不是单词？
• 如何仅使用CSS完成此操作？

示例：

• 第二个框截取了单词abcdefghijk，我希望它在第二个单词后截取并添加“...”

.truncate {
  border-width: 1px;
  border-style: solid;
  border-color: #aaaaaa;
  padding: 10px;
  margin-bottom: 10px;
  width: 260px;
  overflow: hidden;
  display: block;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.truncate.ellipsis {
  height: 50px;
  text-overflow: ellipsis;
}
.truncate.ellipsis.chrome {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

<div class="truncate">
  No truncating at all, height adjusts to text: abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk
</div>
<div class="truncate ellipsis">
  Truncating at 50px height: abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk
</div>
<div class="truncate ellipsis chrome">
  Truncating at 50px height: abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk
</div>

- basZero

---

请查看以下内容：https://dev59.com/W2025IYBdhLWcg3wGBwm - Praveen Kumar Purushothaman

谢谢@PraveenKumar，但那个问题已经4年了。我希望现代浏览器有更好的支持？ - basZero

有一种叫做"Line Clamping"的东西。看这个链接：Line Clampin’ (Truncating Multiple Line Text) - 这对于现代浏览器非常有效。:) - Praveen Kumar Purushothaman

除了提到的方法外，在 SO 上有很多解决方案。搜索类似“多行省略文本”之类的内容。个人认为这个答案不错：http://stackoverflow.com/questions/29160687/insert-ellipsis-after-specific-number-of-lines/29161423#29161423。基本上，它不能仅通过 CSS 实现。您将不得不调整解决方案以避免在单词中间断开，但这并不是难事。 - user663031

也许这对您有用：http://mattsnider.com/css-string-truncation-with-ellipsis/ - fnune

Answer 1

目前还没有一种跨浏览器的方法来实现这个。尽管如此，你可以尝试几种方法：

• 估算适合 DIV 中的字符数，将文本截断到正确的长度，并在结尾处添加省略号
• 您可以使用 :after 伪元素并将其绝对定位在 DIV 的右下角

最后一种方法的示例：

HTML：

<div class="ellipsis-div">
  <p>Long text Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.<p>
</div>

CSS：

.ellipsis-div {
    position: relative;
    width: 150px;
    height: 150px;
    overflow: hidden;
}

.ellipsis-div:after {
    position: absolute;
    display: block;
    content: "...";
    bottom: 0;
    right: 0;
    background-color: white;
}

您需要根据DIV的行高等信息调整:after元素的位置。

- justinledouxweb

Answer 2

显示...（省略号）适用于Chrome、Firefox、IE等浏览器。

.truncate {
  width:240px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

参见此链接：https://jsfiddle.net/n2Lvnqmc/3/。

- Sandeep

---

阅读我的问题：第一个要点：多行！不是单行。 - basZero