在某些段落中,页面要求文字只显示一行,但是width固定,而文字过长,就会出现一个需求,超过长度限制的文字被隐藏且显示省略号

写在需要溢出隐藏的标签下

div{
    overflow: hidden;           /*自动隐藏文字*/  
    white-space: nowrap;        /*强制不换行*/
    text-overflow: ellipsis;    /*文字隐藏后添加省略号*/
}

简单的几行代码就可以达到我们的要求

但是有一个我们需要注意的地方!!

flex布局是前端写代码经常使用的一种布局方式,简单便捷且有效

但是在<red>使用flex布局的元素中不能同时使用文字溢出隐藏</red>,也就是两者不能同时出现在同一标签中

这里,我们也有对应的解决办法

只要保证flex布局和隐藏的样式不在同级元素中就可以,所以在文字外部多包裹一层标签

可以采用下面这段代码的写法

<p>   
    <!-- 我们在这一层的标签进行flex布局 -->
    <span>  <!-- 这一层的标签我们引入文字过长隐藏的样式 -->
        <!-- 文本 -->
    </span>
</p>