CSS 文本超出省略

单行

white-space: nowrap;/* 文本不换行 */
text-overflow: ellipsis;/* 文本超出部分用省略号显示 */
overflow: hidden; /* 文本超出部分省略 */
word-break: break-all;

多行

text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;  
line-clamp: 2;
-webkit-box-orient: vertical;

1)自动换行:

word-wrap:break-word;

word-break:normal; 

2)强制换行:

word-break:break-all;       按字符截断换行 /* 支持IE和chrome,FF不支持*/

word-wrap:break-word;    按英文单词整体截断换行  /* 以上三个浏览器均支持 */

* 注意:单词换行需要父盒子为块级元素  

3)强制不换行:

white-space:nowrap;

猜你喜欢

转载自blog.csdn.net/weixin_44504531/article/details/127006397