css之flex布局文本不换行不显示省略号的解决方法

New个对象.

已于 2024-03-29 16:53:13 修改

阅读量786

点赞数 1

文章标签： css 前端

于 2024-03-29 15:05:21 首次发布

本文链接：https://blog.csdn.net/chb19991118/article/details/137145107

版权

一、单行长文本显示省略号

先讲讲常规情况下长文本不跨行显示省略号的代码：

overflow: hidden;  //不允许内容超出盒子
white-space: nowrap;   //不允许文本跨行
text-overflow: ellipsis;   //文本超出部分以“...”省略号表示

overflow：对超出的内容进行处理
white-space ：对文本格式进行规定
text-overflow ：对超出的文本进行处理
属性值等详细内容可以自行百度作补充学习

前面讲到的是常规情况，而在实战flex复杂布局下则会出现单行长文本显示省略号操作失败的问题

两种解决方式：

1.在flex项目盒子上设置 overflow:hidden
2.在flex项目盒子上设置 min-width:0

经过大量测试，有些手机机型适配 min-width 有问题，建议设置成 width: 0; 更好一点

关注