纯 CSS 自定义多行省略的问题(从原理到实现)

下面我将详细讲解“纯 CSS 自定义多行省略的问题(从原理到实现)”的完整攻略。

下面我将详细讲解“纯 CSS 自定义多行省略的问题(从原理到实现)”的完整攻略。

什么是多行省略？

多行省略是指在一个元素内部的多个行内文字内容中，超出指定行数后，将其余文本省略号表示。

实现多行省略的原理

实现多行省略的原理是使用CSS中的文本溢出和换行属性，由于文本溢出是需要在一定的宽度范围内容纳文本的，而在容纳文本的情况下再加换行属性可以实现多行效果。另外还需要注意的是，文本溢出需要设置宽度、高度和overflow:hidden;属性。

实现多行省略的方法

方法一：使用 -webkit-line-clamp 属性

/* 设置文本行数为3行，并省略超出部分 */
.ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 控制显示的文本行数 */
  -webkit-box-orient: vertical;
}

方法二：使用 ::before 伪元素实现

/* 设置文本行数为2行，并省略超出部分 */
.ellipsis2::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2.4em /*控制显示的文本行数*/;
  top: 0;
  left: 0;
  background-color: inherit;
}
.ellipsis2 {
  position: relative;
  line-height: 1.2em /*控制行高*/;
  height: 3.6em; /*控制显示的总高度*/
  overflow: hidden;
  text-align: justify;
  text-justify: inter-ideograph;
}
.ellipsis2::after {
  content: "...";
  position: absolute;
  right: 0;
  bottom: 0;
  padding-left: 1em;
  background-color: inherit;
}

这里介绍了两种不同的实现方法，其中方法一使用了-webkit-line-clamp属性来控制显示的文本行数；方法二则是使用了::before和::after伪元素来模拟多行省略的效果。

示例说明：

示例一：使用方法一实现多行省略

<div class="ellipsis">
  字符串转数组 &quotABCDEFG&quot.split(&#39;&#39;) +
  &quot;&quot; =&gt; [&quot;A&quot;, &quot;B&quot;, &quot;C&quot;, &quot;D&quot;, &quot;E&quot;, &quot;F&quot;, &quot;G&quot;]
</div>

上述例子中展示了一个div元素，将长字符串压缩至三行，超出的内容被省略号所代替。

示例二：使用方法二实现多行省略

<div class="ellipsis2">
  这是一段需要省略的多行文本这是一段需要省略的多行文本这是一段需要省略的多行文本
</div>

上述例子中，展示了一个div元素，并控制总高度在3.6em内，同时限制文本行数为两行，超出的内容用“...”代替。