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

Question

为什么这么难：

• 固定高度DIV，包含多行文字
• 如果此框的文字太长，请显示＆＃34; ...＆＃34;最后
• 不要砍字！

以下 JSFiddle 会显示演示。

问题：

• 如何制作＆＃34; ...＆＃34;还出现在Firefox，IE，Edge和Safari中？它目前仅适用于Chrome（请参阅JSFiddle
中的.chrome css）
• 我怎样才能确保只剪切空格但没有文字？
• 如何仅使用CSS？

示例：

• 第二个方框切断了abcdefghijk这个词，我希望它在第二个单词之后剪切，然后添加＆＃34; ...＆＃34;

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

Answer 2

show ...（省略号）适用于Chrome，Firefox，IE等。

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

请参阅此链接：https://jsfiddle.net/n2Lvnqmc/3/