巧妙解决css多行文本截断后标签隐藏问题
在使用CSS进行多行文本截断时，常常会遇到一个难题：截断文本后的标签会被隐藏。本文提供一种有效的解决方案，在保持多行截断效果的同时，确保标签可见。
利用Flexbox布局
解决此问题的关键在于使用CSS的Flexbox布局。Flexbox提供灵活的元素排列和对齐方式，能够有效解决该问题。
具体步骤：
立即学习“前端免费学习笔记（深入）”；
包裹元素： 将需要截断的文本元素和紧随其后的标签元素都包裹在一个父容器中。设置Flex容器： 为父容器设置display: flex;，将其转换为Flexbox容器。文本元素拉伸： 为文本元素设置flex-grow: 1;，使其占据剩余可用空间。标签元素固定： 为标签元素设置flex-shrink: 0;，防止其被压缩，保持原始大小。
通过以上设置，截断文本将充分利用可用空间，而标签则会完整显示在文本之后。
示例代码：
.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;}
登录后复制
效果展示：
如效果图所示，文本被截断为两行，而标签依然清晰可见。
使用Flexbox布局，我们轻松解决了CSS多行文本截断后标签隐藏的问题，既保证了多行截断效果，又确保了标签的可见性。 请注意，display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 这三行代码是针对webkit内核浏览器（如Chrome、Safari）的多行文本截断实现，其他浏览器可能需要不同的属性。 建议根据实际情况选择合适的截断方法。
以上就是CSS多行文本截断后标签被隐藏了，如何解决？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2844916.html
