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 它会把整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉的。