如何在句子后添加省略号？ [复制]答案

【问题标题】：How to add an ellipsis after a sentence? [duplicate]如何在句子后添加省略号？ [复制]
【发布时间】：2020-07-22 09:10:17
【问题描述】：

假设我有这句话：

Lorem Ipsum 只是印刷和排版行业的虚拟文本。自 1500 年代以来，Lorem Ipsum 一直是行业的标准虚拟文本，当时一位不知名的印刷商采用了一种类型的厨房并将其加扰以制作类型样本书。它不仅经历了五个世纪，而且经历了电子排版的飞跃，基本保持不变。它在 1960 年代随着发布而普及。

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

Lorem Ipsum 只是印刷和排版行业的虚拟文本。自 1500 年代以来，Lorem Ipsum 一直是行业的标准虚拟文本，当时一位不知名的印刷商采用了一种类型的厨房并将其加扰以制作类型样本书。它有生存...

怎么做？

【问题讨论】：

标签： html css ellipsis

【解决方案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 使用水平省略号字形表示截断文本，但无法自定义。

【讨论】：