css实现多行文字限制显示&编译失效解决方案

最新推荐文章于 2022-05-15 14:05:09 发布

diwei4277

最新推荐文章于 2022-05-15 14:05:09 发布

阅读量174

点赞数

原文链接：http://www.cnblogs.com/Alice-Xu/p/8609371.html

版权

<!DOCTYPE html>

<html>

<head>

<title>css实现多行文字限制显示</title>

<style>

　　编译的时候，默认会过滤-webkit-box-orient: vertical;导致多行文本省略显示不生效

　　解决方案：关闭autoprefixer然后再开启并注释掉

#test {

display: box;

display: -webkit-box;

box-orient: vertical;

　 /* autoprefixer: off */

　 -webkit-box-orient: vertical;

　 /* autoprefixer: on */

line-clamp: 2;

-webkit-line-clamp: 2;

overflow: hidden;

text-overflow: ellipsis;

}

</style>

</head>

<body>

<p id="test">多行文字限制显示多行文字限制显示多行文字限制显示多行文字限制显示多行文字限制显示多行文字限制显示多行文字限制显示多行文字限制显示</p>

</body>

</html>

转载于:https://www.cnblogs.com/Alice-Xu/p/8609371.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

关注关注