CSS 如何使用 CSS 实现单行省略号

在本文中，我们将介绍如何使用 CSS 实现单行省略号。单行省略号在网页设计中常用于显示长文本，当文本内容过长时，可以通过单行省略号的方式，将多余的内容用省略号代替，以节省空间，提高页面的美观性。

阅读更多：CSS 教程

什么是单行省略号？

单行省略号是一种文本截断的方式，当文本内容超过一定宽度时，用省略号（…）代替多余的文本。单行省略号通常使用在标题、段落或链接等需要限制文本长度的地方。

实现单行省略号的方法

使用 text-overflow 属性

CSS 的 text-overflow 属性可以实现单行省略号效果。首先，我们需要设置元素的宽度和 overflow 属性：

.ellipsis {
  width: 200px; /* 设置元素宽度 */
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 设置溢出内容隐藏 */
  text-overflow: ellipsis; /* 设置文本溢出时显示省略号 */
}

在上面的示例中，我们给一个 class 为 “ellipsis” 的元素设置了固定宽度为 200px，防止文本换行，溢出内容被隐藏，当文本溢出时显示省略号。

在多行文本中使用单行省略号

text-overflow 属性只适用于单行文本，如果要在多行文本中实现省略号效果，我们可以结合使用 CSS 的 display 属性和伪元素 ::after。

.ellipsis-multiline {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 最多显示 3 行文本 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ellipsis-multiline::after {
  content: '...'; /* 显示省略号 */
}

在上面的示例中，我们给一个 class 为 “ellipsis-multiline” 的元素设置了显示 3 行文本，并通过伪元素 ::after 显示省略号。