如何实现CSS文本两行超出隐藏？

发布时间：2023-05-21

一、CSS overflow 属性

要实现CSS文本两行超出隐藏，我们可以使用CSS overflow 属性。overflow 属性定义了当一个容器内部的内容超出容器的尺寸时该怎么办。 当我们设置 overflow: hidden; 时，内容超出容器的部分将被隐藏。

代码示例：

.container {
  height: 40px; /* 设置容器高度 */
  overflow: hidden; /* 隐藏容器内部超出的内容 */
}

二、CSS text-overflow 属性

当我们使用 overflow: hidden; 时，容器内部超出的文本会被隐藏，但这可能导致文本截断，看起来不够好看。为了实现文本两行超出隐藏，我们可以使用CSS text-overflow 属性。 text-overflow 属性规定了当文本溢出包含它的元素时发生的事情，我们可以使用它来添加省略号来表示被截断的文本。

代码示例：

.container {
  width: 200px; /* 设置容器宽度 */
  white-space: nowrap; /* 强制在一行中渲染文本 */
  overflow: hidden; /* 隐藏容器内部超出的内容 */
  text-overflow: ellipsis; /* 添加省略号 */
}

三、使用多行文本省略号

如果我们需要支持多行文本溢出隐藏，我们可以使用CSS的 display 属性和伪元素来实现。 我们可以将元素设置为 display: -webkit-box; 将文本设置为 -webkit-box-orient: vertical;，这样我们就可以将文本垂直显示。我们还可以使用伪元素来添加省略号。

代码示例：

.container {
  width: 200px; /* 设置容器宽度 */
  height: 80px; /* 设置容器高度 */
  display: -webkit-box; /* 使用 box 布局 */
  -webkit-box-orient: vertical; /* 设置元素垂直排列 */
  overflow: hidden; /* 隐藏超出范围的内容 */
}
.container::after {
  content: "";
  display: inline-block;
  width: 1em; /* 加上省略号所占据的空间 */
  margin-left: 3px; /* 省略号与文本之间的距离 */
  background: #fff; /* 隐藏省略号 */
}

四、小结

以上就是如何实现CSS文本两行超出隐藏的几种方法，我们可以根据自己的需求选择不同的方法来实现。CSS的强大之处在于它提供了很多方法来控制元素的布局和外观，我们可以根据需要选用最适合的样式进行美化。

推荐文章