文本溢出：省略号 2 行 - CSS

在一些情况下，文本内容超出了其容器的宽度或高度限制。为了解决这个问题，我们可以使用 CSS 属性来控制文本溢出并添加省略号。

overflow 属性

可以使用 overflow 属性来控制文本的溢出。

overflow: hidden;

使用 overflow: hidden; 可以隐藏容器中超出范围的内容，不会出现滚动条。

overflow: scroll;

使用 overflow: scroll; 可以在容器中添加滚动条，以便查看被隐藏的内容。

overflow: auto;

使用 overflow: auto; 可以根据容器大小自动判断是否需要添加滚动条。

text-overflow 属性

除了 overflow 属性，还可以使用 text-overflow 属性来控制文本的溢出，并添加省略号（...）来指示被隐藏的内容。

text-overflow: ellipsis;

使用 text-overflow: ellipsis; 可以在文本被截断的末尾添加省略号。

white-space 属性

省略号只会在单行文本中显示。如果您希望在多行文本中显示省略号，则可以使用 white-space 属性来设置文本如何换行。

white-space: nowrap;

使用 white-space: nowrap; 可以防止文本换行，强制它在同一行上显示，一直到达容器的末尾。

white-space: normal;

使用 white-space: normal; 可以让文本自动换行，根据空格或换行符进行换行。

white-space: pre;

使用 white-space: pre; 可以保留源代码的空格和换行符。如果您希望使用这种方式排版文本，可以选择这种方法。

代码示例

以下是一个将多行文本截断并添加省略号的示例：

.text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

这种方式使用了 -webkit-box 和 -webkit-line-clamp 属性来控制多行文本的显示行数，并在末尾添加省略号。

代码说明

• display: -webkit-box; 让元素作为一个弹性容器显示，这是一个 Safari 和 Chrome 等 WebKit 浏览器的私有属性。
• -webkit-box-orient: vertical; 使子元素垂直方向排列，在 WebKit 浏览器中默认为水平方向排列。
• -webkit-line-clamp: 2; 要显示的文本行数。
• overflow: hidden; 显示被隐藏的内容。
• text-overflow: ellipsis; 在文本超出容器时显示省略号（...）。
• white-space: normal; 按照空格或者换行符，自动换行。

结论

使用上述属性可以让您轻松控制超出容器的文本，并添加省略号。这些技术在 Web 设计中非常常见，特别是在移动设备上。