css两行内容显示省略
需求是两行内容时,第二行内容超出部分显示为省略号
.li-header-name {
width 44%;
overflow hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; //两行,行数可以自有定义
-webkit-box-orient: vertical;
}
效果如下:出现了第一行长度大于第二行的现象,显示不够友好
需要增加属性word-break,优化后如下:
.li-header-name {
width 44%;
overflow hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-break: break-all; //增加允许在单词内换行
}
显示效果: