文本溢出【单行和多行文本溢出】

单行文本溢出方法：

方法一:

显示省略号（ellipsis）：当单行文本溢出时，显示省略号表示被截断了。具体实现方式是设置 text-overflow:ellipsis，并且必须还要设置 white-space 和 overflow 属性。

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

方法二：

显示字符串（string）：当单行文本溢出时，显示指定的字符串。具体实现方式是设置 text-overflow: string，并且同时设置 content 属性。

.text {
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: clip; /* 剪切 */
}

.text::after {
  content: "..."; /* 溢出时显示... */
}

方法三：

不换行（clip）：当单行文本溢出时，直接将超出部分剪切。具体实现方式是设置 text-overflow: clip，并且必须还要设置 white-space 和 overflow 属性。

.text {
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: clip; /* 剪切 */
}

多行文本溢出:

方法一：

显示省略号（ellipsis）：当多行文本溢出时，显示省略号表示被截断了。具体实现方式是设置 display: -webkit-box，-webkit-box-orient: vertical，并且必须还要设置 overflow 和 text-overflow 属性。

.text {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 限制行数 */
  -webkit-box-orient: vertical; /* 设置为垂直方向 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 显示省略号 */
}

方法二：

使用 JavaScript 处理多行文本溢出：在实际开发中，我们也可以通过使用 JavaScript 来处理多行文本溢出。比较流行的库有 line-clamp.js 和 clamp.js 等。

<div class="text" id="text">
  一段多行文本，需要进行溢出处理...
</div>

<script src="https://unpkg.com/clamp-js/dist/clamp.min.js"></script>
<script>
  clamp(document.getElementById('text'), { clamp: 3 });
</script>