纯CSS实现“文本溢出截断省略”的几种方法

下面我将为大家详细讲解“纯CSS实现文本溢出截断省略”的几种方法，包括单行文本截断和多行文本截断。

下面我将为大家详细讲解“纯CSS实现文本溢出截断省略”的几种方法，包括单行文本截断和多行文本截断。

单行文本截断

方案一：利用text-overflow属性

/* 显示省略号 */
.ellipsis1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

使用text-overflow属性可以很方便地实现单行文本的截断并且在末尾添加省略号。其中，text-overflow: ellipsis表示末尾用省略号表示超出的内容。

方案二：利用width和overflow属性

/* 显示省略号 */
.ellipsis2 {
  width: 100px;
  overflow: hidden;
  white-space: nowrap;
}

/* 不显示省略号 */
.no-ellipsis {
  width: 100px;
  overflow: hidden;
  white-space: nowrap;
}

同时利用width和overflow属性可以实现单行文本的截断，如果想要在末尾添加省略号，只需要设置text-overflow属性为ellipsis，否则可以不设置。

多行文本截断

方案一：利用-webkit-line-clamp属性

.ellipsis-multiline {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

-webkit-line-clamp属性是一个WebKit私有属性，可以限制在一个块元素显示的文本的行数。该属性需要结合display属性的-webkit-box(将对象作为弹性伸缩盒子模型显示)属性和WebKit私有属性-webkit-box-orient(设置或检索伸缩盒对象的子元素的排列方式)属性一起使用。

方案二：利用纯CSS实现

.content {
  position: relative;
  width: 150px;
  line-height: 1.2em;
  overflow: hidden;
}

.content::before {
  content: "...";
  position: absolute;
  right: 0;
  bottom: 0;
}

.content::after {
  content: "";
  position: absolute;
  right: 0;
  width: 20px;
  height: 1.2em;
  margin-top: -1.2em;
  background: #fff;
}

该方案利用了伪元素 ::before 和 ::after 来实现文本的截断。 ::before 元素添加 "..."， ::after 元素使用background 属性，使省略号在文本后不会显示。

以上是实现文本溢出截断省略的几种方法并举了两个例子来介绍。希望对大家有所帮助。