前言
有些需求需要我们控制一段文本最多显示几行,就像逛淘宝京东的评价楼层一样,有时可能还需要隐藏剩余部分,这样的需求我们怎么来解决呢?
解决办法
我们完全可以使用css来解决这一需求
1. 解决文本显示行数
word{
display:-webkit-box // 使其变为伸缩盒
-webkit-line-clamp:2 // 设置其要显示的行数
-webkit-box-orient:vertical // 规定子元素的排列方式
}
2. 隐藏剩余部分
word{
display:-webkit-box // 使其变为伸缩盒
-webkit-line-clamp:2 // 设置其要显示的行数
-webkit-box-orient:vertical // 规定子元素的排列方式
100%;
overflow:hidden;
text-overflow:ellipsis;
}
注意:当我们设置了display:-webkit-box,那么-webkit-line-clamp和-webkit-box-orient:vertical属性是必须的!!!
更新于2019-10-11
其中-webkit-line-clamp
就是控制行数的,是3
就是显示3行,3行结束点点点,如果是2
则最多2行。