问题描述很多时候，需要进行字数控制。比如不超过两行就全部显示，超过两行就隐藏多余的字，显示省略号。使用-webkit-line-clamp属性可以轻松实现这个需求。-webkit-line-clamp属性限制块元素中显示的文本行数。-webkit-line-clamp是不受支持的WebKit属性，未出现在CSS规范草案中。为了实现这种效果，需要结合其他奇特的WebKit属性。常用组合属性：display:-webkit-box;必须组合的属性将对象显示为灵活的盒模型。-webkit-box-orient必须与设置或检索flexbox对象子对象的方向的属性组合。text-overflow可用于多行文本的情况，以设置如何隐藏超出边界的文本。比如text-overflow:ellipsis就是用省略号“...”来隐藏超出范围的文本。如果标签中有英文字符，当标签为英文字符时，您会发现样式无效。英文不会自动换行，所以添加以下属性以兼容英文字符。word-wrap:break-word;word-break:break-all;开发中遇到的小问题：缺少代码~~~我在vue文件的样式区少写了如下代码，但是当我启动项目的时候，在chrome浏览器中查看效果的时候，发现一行代码丢失：-webkit-box-orient：vertical；。导致我的风格失败....linecamp{overflow:hidden;文本溢出：省略号；显示：-webkit-box；-webkit-box-orient：垂直；-webkit-line-clamp:2;自动换行：断字；word-break:break-all;}解决办法找了半天终于找到原因了，改了半天webpack配置也没有解决问题。后来经大神指点，是因为我在vue文件中写了这行less代码，而项目编译时，vue调用postcss处理less，将这行代码删掉。我把这段代码提取到index.less中，在vue文件中直接引用了这个样式类linecamp。代码出现~问题消失~也是很奇怪的问题，长见识~~
