css 给文章打省略号...

在 CSS 中，可以使用省略号（ellipsis）来表示文本溢出时的处理方式，通常是在文本长度超过容器宽度时显示省略号 ...。要实现省略号效果，通常使用 text-overflow 属性，并配合其他一些样式来限制文本的显示区域。

1. 单行文本溢出省略号

• 用法：对于单行文本，如果内容超出了容器的宽度，可以使用 text-overflow: ellipsis; 来显示省略号。
• 需要配合的属性：
  • overflow: hidden;：隐藏超出容器的部分。
  • white-space: nowrap;：防止文本换行。

.single-line-ellipsis {
  width: 200px;            /* 容器宽度 */
  white-space: nowrap;     /* 禁止换行 */
  overflow: hidden;        /* 超出隐藏 */
  text-overflow: ellipsis; /* 显示省略号 */
}

HTML：

<div class="single-line-ellipsis">这是一个很长的文本，超出部分会显示为省略号。</div>

效果：当文本长度超过 200px 时，超出部分会显示为 ...。

2. 多行文本溢出省略号

• 用法：对于多行文本，如果内容超出了容器的高度并且需要显示省略号，可以使用 line-clamp 来实现（需要浏览器支持）。
• 需要配合的属性：
  • display: -webkit-box;：创建一个弹性容器。
  • webkit-line-clamp: n;：指定最多显示多少行文本。
  • webkit-box-orient: vertical;：设置容器的排列方向。
  • overflow: hidden;：隐藏超出的文本。

.multi-line-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 3;      /* 显示三行 */
  -webkit-box-orient: vertical; /* 设置排列方向为垂直 */
  overflow: hidden;            /* 隐藏超出部分 */
  height: 60px;                /* 设置容器高度 */
}

HTML：

<div class="multi-line-ellipsis">
  这是一个多行文本示例，文本超出容器的部分会显示省略号。这里的文本比较长，应该会在三行后显示省略号。
</div>

效果：当文本内容超过 3 行时，超出部分会显示为 ...。

注意：

• -webkit-line-clamp 是一个 Webkit 核心的特性，虽然被许多现代浏览器支持，但并不是所有浏览器都兼容，特别是旧版浏览器和某些非 Webkit 引擎的浏览器。
• 对于多行省略号，使用 line-clamp 需要设置 display: -webkit-box 和 -webkit-box-orient，这使得该功能主要适用于 Webkit 浏览器，如 Chrome、Safari 等。

通过这些方法，你可以有效地在 CSS 中为文本设置省略号，确保内容不会溢出容器并保持界面的整洁。