单行或多行溢出隐藏显示省略号

156 阅读1分钟

1、单行溢出

width: 300px;
overflow: hidden;
whit-space: nowrap;  //不换行
text-overflow: ellipsis;  //溢出显示...

2、多行溢出

overflow: hidden;
display: -webkit-box;
display: -moz-box;
text-overflow: ellipsis;
white-space: pre-wrap;   //保留空白符序列,正常换行
word-break: break-all;   //截断单词
//word- wrap: break-word; //允许长单词或者url地址换到下一行
-webkit-box-orient: vertical;  //规定框的子元素应该被垂直排列
-webkit-line-clamp:2;   //显示行数

注意:

1,word-break:break-all 如果该行末端有个英文单词很长(congratulation等),它会把单词截断。

2,word-wrap:break-word 它会把整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉的。