使用css控制文字显示几行并且剩余部分隐藏（移动端和PC端同样适用）

前言

有些需求需要我们控制一段文本最多显示几行，就像逛淘宝京东的评价楼层一样，有时可能还需要隐藏剩余部分，这样的需求我们怎么来解决呢？

解决办法

我们完全可以使用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行。

进一步了解box-orient属性