CSS妙招：优雅处理多行文本截断与标签显示
在CSS中，截断多行文本通常易于实现，但当文本后紧跟一个标签时，如何保证标签始终可见就成为一个挑战。本文提供一种解决方案，确保在文本截断后，标签依然清晰可见。
设计目标
- 标题限制在两行显示。
- 超出两行的文本以省略号 "..." 显示。
- 关联标签始终保持可见。
CSS代码实现
立即学习“前端免费学习笔记（深入）”；
以下CSS代码完美解决了上述问题：
<code class="css">.container {
display: flex;
flex-direction: column;
}
.title {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.tag {
background-color: #f00;
color: #fff;
padding: 0.2em 0.5em;
margin-top: 0.5em;
}</code>
HTML示例
<code class="html"><div class="container"> <p class="title">这是一段很长很长的标题文本，需要截断显示在两行内……</p> <span class="tag">标签</span> </div></code>
工作原理
- 使用
flex布局，使标签自然位于标题下方。 -
-webkit-line-clamp属性限制标题显示行数为2。 -
-webkit-box-orient: vertical和display: -webkit-box配合使用，实现垂直方向的文本截断和省略号显示。 - 标签使用简单的样式进行修饰。
此方法简洁高效，避免了复杂的绝对定位，更易于维护和扩展。 通过此方案，您可以轻松处理多行文本截断时标签显示的问题，提升网页设计的专业性。
