在某些段落中,页面要求文字只显示一行,但是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>