CSS 文本显示点点点

在一些情况下，我们需要将文本内容进行截断，但是又希望不影响页面的美观度。常见的做法是使用 CSS 的文本溢出截断。然而，这样直接截断文字可能会使得一些重要信息丢失，因此通常需要在截断处添加一些提示，比如点点点（...），来提醒用户有截断发生。接下来，我们将讨论如何用 CSS 实现文本显示点点点的效果。

使用 text-overflow

CSS 提供了 text-overflow 属性来实现文本溢出截断，可以在超出容器时在末尾显示一个提示符号，比如点点点等。

.overflow {
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 隐藏超出容器部分 */
  text-overflow: ellipsis; /* 在文本溢出处显示“...” */
}

将以上样式应用到一个元素上，即可在溢出处显示点点点，同时保持文本内容的完整性。

多行文字截断

上面提到的 text-overflow 只能对单行文本进行溢出截断，如果要对多行文本进行溢出截断该怎么做呢？答案是使用 line-clamp 属性。

.multiline {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 控制显示的行数 */
}

上面的样式会将元素内的文本限制在一定的行数（这里设置了 3 行），超出部分将被隐藏并在末尾显示点点点。

总结

以上就是用 CSS 实现文本显示点点点的方法。对于单行文本溢出，可以使用 text-overflow 属性；对于多行文本截断，可以使用 line-clamp 属性。在我们进行文本截断时，不要忘记添加点点点这些提示，以增加用户友好度。