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;