如何在句子后添加省略号？

Question

假设我有这句话：

Lorem Ipsum 只是印刷和排版行业的虚拟文本。自 1500 年代以来，Lorem Ipsum 一直是行业的标准虚拟文本，当时一位不知名的印刷商拿走了一个字体厨房，并把它加在一起制作了一本字体样本书。它不仅经历了五个世纪，而且还经历了电子排版的飞跃，基本保持不变。它在 1960 年代随着发行而流行。

我只想要三行。在前 3 行之后，除了 ...（省略号）外，不会显示任何内容。喜欢：

Lorem Ipsum 只是印刷和排版行业的虚拟文本。自 1500 年代以来，Lorem Ipsum 一直是行业的标准虚拟文本，当时一位不知名的印刷商拿走了一个字体厨房，并把它加在一起制作了一本字体样本书。它有幸存...

怎么做？

Answer 1

您可以使用-webkit-line-clamp 属性来实现您想要的。如果要将其限制为 3 行，则应使用 -webkit-line-clamp: 3。尽管它有 -webkit 供应商前缀，但它是 surprisingly quite widely support among modern browsers.

需要注意的是 -webkit-line-clamp 必须与两个额外的 CSS 属性一起使用：display: -webkit-box 和 -webkit-box-orient: vertical.

.box {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;

  /** Presentation purposes only **/
  width: 400px;
  margin: 0 auto;
  background-color: #ccc;
  color: #333;
}

<div class="box">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release.
</div>

希望当 CSS 溢出模块级别 3 完成并得到广泛支持时，我们可以在不久的将来开始使用 non-prefixed line-clamp property，并能够添加自定义溢出文本指示器。现在，-webkit-line-clamp 使用水平省略号字形来指示截止文本，但无法对其进行自定义。

如何在句子后添加省略号？

How to add an ellipsis after a sentence?

html

css

ellipsis