文字溢出隐藏以及和 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>

• LinuxDo
• Giscus
• Twikoo