CSS多行文本截断与标签显示的巧妙解决
在CSS样式设计中，常常需要处理多行文本截断的问题，尤其当文本过长时，需要将其限制在特定行数并以省略号结尾。然而，如果文本后紧跟一个标签，如何既截断文本又保证标签可见性就成为一个挑战。
本文提供一种有效的解决方案：利用伪元素。通过创建并巧妙地定位一个伪元素，我们可以将截断后的文本内容放置在伪元素中，同时主元素通过overflow: hidden隐藏多余内容，从而确保标签始终可见。
以下是一个示例代码，演示如何实现这一效果：
立即学习“前端免费学习笔记（深入）”；
<code class="css">.container {
position: relative; /* 关键：使绝对定位的标签生效 */
width: 200px;
overflow: hidden;
}
.text {
display: -webkit-box;
-webkit-line-clamp: 2; /* 控制行数 */
-webkit-box-orient: vertical;
overflow: hidden; /* 隐藏多余文本 */
}
.tag {
position: absolute;
bottom: 0;
left: 0;
background-color: #f00;
color: #fff;
padding: 5px;
}</code>
效果展示：
<code class="html"><div class="container">
<p class="text">
这是一段很长很长的需要显示的文本，需要截断...<br>
这是第二行文本...
</p>
<span class="tag">标签</span>
</div></code>
技术原理：
.container 设置为相对定位，这是为了让绝对定位的 .tag 标签能够正确地相对于 .container 定位。.text 使用 -webkit-line-clamp 属性限制文本行数，并结合 overflow: hidden 隐藏超出部分。.tag 标签使用绝对定位，放置在 .container 的底部，从而始终可见。
通过这种方法，您可以优雅地解决CSS多行文本截断与标签显示冲突的问题，保持页面布局的整洁和美观。
