前端溢出省略号，让你的文字优雅呈现

前端

2023-11-12 23:27:32

在现代前端开发中，文本布局至关重要。当文本超过其容器时，它可能会导致显示问题，例如文本溢出或换行。为了优雅地处理溢出文本，CSS 提供了 overflow 和 text-overflow 属性。

CSS 溢出属性

overflow 属性控制元素中内容的显示方式，当内容超出元素边界时，它可以采取以下值：

visible：内容超出元素边界仍可见。
hidden：超出元素边界的隐藏内容。
scroll：在元素中创建滚动条，以便查看超出部分的内容。
auto：根据需要自动显示滚动条。

CSS 文本溢出属性

text-overflow 属性控制溢出文本的处理方式，它可以采取以下值：

clip：超出元素边界的文本被剪裁。
ellipsis：超出元素边界的文本被省略号（...）替代。
initial：使用浏览器的默认设置。
inherit：从父元素继承设置。

实现文字溢出省略号

要实现文字溢出省略号，需要将 overflow 设置为 hidden 或 scroll，并将 text-overflow 设置为 ellipsis。下面是三种不同效果的代码示例：

一、当行文本隐藏

.container {
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

二、多行文本隐藏（首行显示）

.container {
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

三、多行文本隐藏（中间显示）

.container {
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}