CSS实现单行、多行文本溢出显示省略号的实现方法

下面我来详细讲解CSS实现单行、多行文本溢出显示省略号的实现方法。

一、单行文本溢出显示省略号的实现方法

实现单行文本溢出显示省略号的方法是通过增加CSS属性text-overflow来控制文本的溢出效果。

.single-line {
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 隐藏文本溢出部分 */
  text-overflow: ellipsis; /* 显示省略号 */
}

上述CSS代码中：

• white-space: nowrap; 指禁止文本换行，确保整行文字在同一行上展示；
• overflow: hidden; 用于隐藏文本溢出的部分；
• text-overflow: ellipsis; 定义文本溢出显示省略号（...）。

下面是一段示例代码，使用上述CSS实现对单行文本进行溢出显示省略号：

<p class="single-line">这是一段单行文本，当它超出容器边界时将会自动显示省略号。</p>

二、多行文本溢出显示省略号的实现方法

实现多行文本溢出显示省略号的方法是通过增加CSS属性-webkit-line-clamp和display来控制文本的溢出效果。

.multi-line {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 控制行数 */
  overflow: hidden; /* 隐藏文本溢出部分 */
  text-overflow: ellipsis; /* 显示省略号 */
}

上述CSS代码中：

• display: -webkit-box; 用于设置文本展示为Block元素，这是多行文本溢出显示省略号的前提条件之一；
• -webkit-box-orient: vertical; 定义文本在垂直方向上呈现；
• -webkit-line-clamp: 3; 控制文本的行数为3行，超过部分将被省略，保留部分通过省略号（...）显示；
• overflow: hidden; 用于隐藏文本溢出的部分；
• text-overflow: ellipsis; 定义文本溢出时显示省略号。

下面是一段示例代码，使用上述CSS实现对多行文本进行溢出显示省略号：

<p class="multi-line">
  这是一段多行文本，当它超出容器的三行时将会被自动显示省略号，<br>
  这是第二行文本，同样将会被自动显示省略号，<br>
  这是第三行文本，同样将会被自动显示省略号。
</p>

希望本文对您有所帮助。