前言
有些需求需要我们控制一段文本最多显示几行,就像逛淘宝京东的评价楼层一样,有时可能还需要隐藏剩余部分,这样的需求我们怎么来解决呢?
解决办法
我们完全可以使用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 // 规定子元素的排列方式 width:100%; overflow:hidden; text-overflow:ellipsis; }
注意:当我们设置了display:-webkit-box,那么-webkit-line-clamp和-webkit-box-orient:vertical属性是必须的!!!