巧妙解决css多行文本截断后标签隐藏问题
在使用CSS进行多行文本截断时，常常会遇到一个难题：截断文本后的标签会被隐藏。本文提供一种有效的解决方案，在保持多行截断效果的同时，确保标签可见。
利用Flexbox布局
解决此问题的关键在于使用CSS的Flexbox布局。Flexbox提供灵活的元素排列和对齐方式，能够有效解决该问题。
具体步骤：
立即学习“前端免费学习笔记（深入）”；
- 包裹元素： 将需要截断的文本元素和紧随其后的标签元素都包裹在一个父容器中。
-
设置Flex容器： 为父容器设置
display: flex;，将其转换为Flexbox容器。 -
文本元素拉伸： 为文本元素设置
flex-grow: 1;，使其占据剩余可用空间。 -
标签元素固定： 为标签元素设置
flex-shrink: 0;，防止其被压缩，保持原始大小。
通过以上设置，截断文本将充分利用可用空间，而标签则会完整显示在文本之后。
示例代码：
<code class="css">.parent-container {
display: flex;
align-items: center; /* 可选：垂直居中对齐 */
}
.truncated-text {
flex-grow: 1;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; /* Webkit浏览器多行文本截断 */
-webkit-line-clamp: 2; /* 设置截断行数 */
-webkit-box-orient: vertical;
}
.tag {
flex-shrink: 0;
padding: 4px;
background-color: #ccc;
}</code>
效果展示：
如效果图所示，文本被截断为两行，而标签依然清晰可见。
使用Flexbox布局，我们轻松解决了CSS多行文本截断后标签隐藏的问题，既保证了多行截断效果，又确保了标签的可见性。 请注意，display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 这三行代码是针对webkit内核浏览器（如Chrome、Safari）的多行文本截断实现，其他浏览器可能需要不同的属性。 建议根据实际情况选择合适的截断方法。
