文字溢出隐藏以及和flex冲突的问题
在某些段落中，页面要求文字只显示一行，但是width固定，而文字过长，就会出现一个需求，超过长度限制的文字被隐藏且显示省略号，css 支持这样的属性。
单行文本溢出隐藏
div{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}多行文本溢出隐藏
div {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}简单的几行代码就可以达到我们的要求。
但是有一个我们需要注意的地方！！
flex布局是前端写代码经常使用的一种布局方式，简单便捷且有效，但是在使用flex布局的元素中不能同时使用文字溢出隐藏,也就是两者不能同时出现在同一标签中。
这里，我们也有对应的解决办法。
只要保证flex布局和隐藏的样式不在同级元素中就可以，所以在文字外部多包裹一层标签。
可以采用下面这段代码的写法；
<p>
<!-- 我们在这一层的标签进行flex布局 -->
<span> <!-- 这一层的标签我们引入文字过长隐藏的样式 -->
<!-- 文本 -->
</span>
</p>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020 年 08 月，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
