html - 文本溢出省略号不适用于多行文本框

Question

为什么这么难拥有这个:

• 固定高度DIV多行文本
• 如果文本对于此框来说太长，则在末尾显示“...”
• 不要打断字!

以下 JSFiddle 展示了一个演示。

问题:

• 如何让“...”也出现在 Firefox、IE、Edge 和 Safari 中？目前仅在 Chrome 中有效(参见 .chrome css)在 JSFiddle
• 我怎样才能确保只剪切空格而不剪切文字？
• 仅使用 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>

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 元素的位置...