【前端奶酪树】纯CSS实现多行文字溢出并显示省略号使用-webkit-line-clamp控制数量oflines因为-webkit-line-clamp用于限制块元素中显示的文本行数，所以这是一个不受支持的WebKit属性，没有出现在CSS规范草案中。要达到这个效果，需要结合其他国外的WebKit属性。溢出：隐藏；文本溢出：省略号；//当文字溢出时，使用省略号“...”隐藏超出范围的文字。显示：-webkit-box；//将对象显示为弹性盒子模型-webkit-box-orient:vertical;//设置或获取flexbox对象子元素的排列-webkit-line-clamp:2;//控制文本行数这种样式在vue或者angular项目中会失效，因为代码构建过程中使用了autoprefixer-webkit-box-orient，是一种过时的flexbox语法，现在已经改造成弹性方向。人们对Autoprefixer感到厌烦的原因是因为Autoprefixer破坏了line-clamp的使用，而这个问题已经存在了很长时间。然而，使用旧的过时的flexbox语法是line-clamp处理任何-webkit-browser中的多行溢出的唯一纯CSS方式。Autoprefixer作者的意见如下是的，我知道line-claim属性。我个人不喜欢只有webkite的东西。所以我不想花时间允许人们这样做（但你可以通过/*autoprefixer:ignorenext*/或/*autoprefixer:off*/告诉autoprefixer忽略这个属性检查）。但是如果有人解决了webkit-only的问题，我会去修复这个属性的检查。所以最终的开发代码如下：/*autoprefixer:off*/overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;参考文献《多行文本溢出显示省略号(…)全攻略-WEB前端开发》《Ask not to remove the code: -webkit-box-orient · Issue #1141 · postcss/autoprefixer》
