css文字两行显示，超出显示......
2020-05-20 本文已影响0人
coderfl
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.div1{
width: 300px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div class="div1">
偶尔会觉得，生活就是无休止的烦恼纠缠的总和。想要健健康康，却总是身体不适；
想要安然入睡，却总是失眠多梦；想要平静度日，却总是风波不止。每天都在坚持，每天都在隐忍，
然而，再坚强的心，也无法长期硬撑。本以为每天努力的微笑，就能换来一个明朗的晴空，
一切却是徒劳无功。不想再虚假地笑了，也不会懦弱地哭了，那就这样面无表情地保持着一颗淡然的素心，
默默前行吧。
</div>
</body>
</html>
-webkit-box-orient: vertical;在vue,react中使用样式无效，因为autoprefixer打包会自动生成前缀
应该如下使用：
/* autoprefixer: off */
-webkit-box-orient: vertical;
