前端UI展示中,很经常遇到多行文本溢出展示的细节问题。大部分时候遇到的是一行文本显示不了全部内容时,则超出部分隐藏,只显示省略号,于是一开始我们的解决方案是:
.txt{
display: block;
height: 100px;
width: 100px;
white-space: nowrap;
overflow: hidden;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
text-overflow: ellipsis;
}
这种解决方案有2个限制条件:
1、必须设置white-space为nowrap
2、只能针对一行文本溢出的情况
当产品需求需要出现两行文本显示,溢出则省略号时,这种方案就没辙了。
一种新的解决方案能够适应产品的需求,而且在移动端自适应宽度的UI展示上也完美支持:
.txt{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
display: -moz-box;
-webkit-line-clamp: 1;
-moz-line-clamp: 1;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
}
这种方案需要设置5个属性:overflow、text-overflow、display、-xx-line-clamp、-xx-box-orient,其中-xx-line-clamp决定了文本显示的行数,如下截图: