困扰了很久的一个问题,css多行文本溢出显示省略号,部分文字隐藏不掉,今天找到了解决方法,做下记录。
方法
css多行文本溢出显示省略号
overflow: hidden;
text-overflow: ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient: vertical;
问题
手机上出现部分文字没隐藏的问题
效果如下图:
解决方案
增加下面的代码解决这个问题,给定高度和行高。
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 20px;
height: 40px;/* 2行隐藏就两倍,三行隐藏就三倍*/
效果如下:
希望给和我一样有遇到这个问题的人带来帮助。