太原网站建设方案维护,电子商务网站开发相关技术,网站栏目名,网站建设的流程简答题文章目录 一、单行长文本显示省略号二、flex布局下的处理技巧 一、单行长文本显示省略号
先讲讲常规情况下长文本不跨行显示省略号的代码#xff1a;
overflow: hidden; //不允许内容超出盒子
white-space: nowrap; //不允许文本跨行
text-overflow: ellipsis; //文本超… 文章目录 一、单行长文本显示省略号二、flex布局下的处理技巧 一、单行长文本显示省略号
先讲讲常规情况下长文本不跨行显示省略号的代码
overflow: hidden; //不允许内容超出盒子
white-space: nowrap; //不允许文本跨行
text-overflow: ellipsis; //文本超出部分以“...”省略号表示overflow对超出的内容进行处理 white-space 对文本格式进行规定 text-overflow 对超出的文本进行处理 属性值等详细内容可以自行百度作补充学习
二、flex布局下的处理技巧
前面讲到的是常规情况而在实战flex复杂布局下则会出现单行长文本显示省略号操作失败的问题
两种解决方式
1.在flex项目盒子上设置 overflow:hidden 2.在flex项目盒子上设置 min-width:0
经过大量测试有些手机机型适配 min-width 有问题建议设置成 width: 0; 更好一点
