CSS技巧:文本换行及溢出隐藏

文字溢出隐藏

单行文本

width: 200px; // 需要设置这个固定宽度
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行文本

display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示
word-break: break-all;
-webkit-box-orient: vertical; // 设置或检索伸缩盒对象的子元素的排列方式
-webkit-line-clamp: 4; // 需要显示的行数
overflow: hidden;
text-overflow: ellipsis;

 

让带有"\n"的文本内容在div中自动换行

word-break: break-all;
white-space: pre-line;

 

posted @ 2020-05-29 09:58  一江西流  阅读(533)  评论(0编辑  收藏  举报