目录
- 前言
- 实现方式：使用-webkit-line-clamp
- 步骤一：设置父容器
- 步骤二：应用CSS样式
- 完整代码
- 总结
前言
你好，我是喵喵侠。在前端开发页面的过程中，有时候需要对段落文字进行溢出隐藏处理，特别是在内容较长的情况下。这篇文章将详细讲解如何使用CSS实现多行文字的溢出隐藏，再想到解决方法之前，你会觉得很麻烦，但有了这篇文章，你再也不用烦恼如何实现段落多行文本溢出隐藏的问题了！
实现方式：使用-webkit-line-clamp
实现多行文本溢出隐藏的关键，是使用CSS的-webkit-line-clamp属性，这个属性结合其他几个属性可以实现我们想要的效果。
根据MDN文档的描述，需要注意的是，它只有在display属性设置成 -webkit-box 或者 -webkit-inline-box 并且box-orient属性设置成 vertical时才有效果。
另外，该属性最初在 WebKit 中实现的，但存在一些问题。由于需要支持旧版本的浏览器，该属性已在 CSS Overflow Module Level 4 中被标准化。CSS Overflow Module Level 4 规范还定义了一个 line-clamp 属性，用来代替此属性并避免一些问题。
line-clamp这个CSS属性你也可以在caniuse上可以看到浏览器对此支持的情况。从下图可以看到，目前市面上主流的浏览器都是支持的，可以放心大胆使用。
"line-clamp" | Can I use... Support tables for HTML5, CSS3, etc
以下是详细步骤和代码示例：
步骤一：设置父容器
首先，设置一个父容器，这个容器包含我们要处理的段落文字。
代码语言：html复制<div class="text-container">
<p class="element">这是一个很长的段落文字示例，这段文字会被限制在两行显示，超出的部分将被隐藏并显示省略号。</p>
</div>步骤二：应用CSS样式
接下来，使用CSS设置-webkit-line-clamp属性以及其他相关属性。
.element {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
}这段CSS代码的具体解释如下：
display: -webkit-box;：设置盒模型为-webkit-box，使其能够支持多行文本溢出隐藏。-webkit-box-orient: vertical;：将盒子设置为垂直布局。-webkit-line-clamp: 2;：设置最大显示的行数，这里设置为2行。overflow: hidden;：隐藏超出容器的内容。text-overflow: ellipsis;：在溢出隐藏时显示省略号。word-break: break-all;：表示对于对于 non-CJK (除了中文/日文/韩文外)文本，可在任意字符间断行。
注意：
word-break: break-all;这个必须要设置，不然纯数字是没办法换行的，一定不要写漏掉了。高度或者最大高度可以不用设置，这个我试过了。如果你希望文字排版好看一点，可以设置line-height:1.5;
完整代码
代码语言：html复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多行文本溢出隐藏示例</title>
<style>
.text-container {
width: 300px;
border: 1px solid #000;
}
.element {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
}
</style>
</head>
<body>
<div class="text-container">
<p class="element"> 这是一个很长的段落文字示例，这段文字会被限制在两行显示，超出的部分将被隐藏并显示省略号。这里继续添加更多的文字内容，以确保段落足够长来触发溢出效果。再多加一些文字以确保效果明显。 </p>
</div>
</body>
</html>效果如下：
总结
之前我看到过很多别的方法，比方说用伪元素做定位之类的，可以实现，但缺点也很明显，代码量也比较多。而通过使用-webkit-line-clamp属性，并且结合其他CSS属性，可以轻松实现段落多行文本的溢出隐藏。这种方法不仅简洁高效，还能保持页面布局的整洁，这可以说是最优雅的解决方案了！如果你需要对多行文本进行溢出隐藏处理，推荐使用这种方法。
希望这篇文章对你有所帮助！如果有任何疑问或需要进一步的解释，欢迎在评论区留言讨论。
