【前端】css 实现两行或多行文本溢出显示省略号

【前端】css 实现两行或多行文本溢出显示省略号 [ 前端 ]

晚安月亮文章正文

椰奶冻

{{nature("2023-05-25 10:46:38")}}更新

大家都知道，强制一行溢出显示省略号（...）的情况很简单

overflow:hidden;//超出的隐藏
text-overflow:ellipsis;//显示省略符号来代表被修剪的文本。
white-space:nowrap;//不换行

但是如果要强制两行甚至多行的话，需要用到css3的知识点

网上大多版本都是：

overflow: hidden;  // 超出的文本隐藏
text-overflow: ellipsis; // 溢出用省略号显示
display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示。
-webkit-line-clamp: 2; // 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。
-webkit-box-orient: vertical;  // 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）

但是在实际项目中，我们会发现并没有效果，这是因为代码经过编译后就把 -webkit-box-orient: vertical 干掉了。所以最终的最好的解决方案：

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; //多行在这里修改数字即可
overflow:hidden;
/* autoprefixer: ignore next */
-webkit-box-orient: vertical;

最近在修改项目的CSS，发现/* autoprefixer: ignore next */没啥用，然后一顿操作猛如虎，请同样有问题的同学将该行代码改成 /*! autoprefixer: ignore next */，细心一点的同学可以发现，又是编译将 -webkit-box-orient: vertical;该行代码跳过的原因。