div中只显示2行文字超出隐藏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div1{
300px;
overflow: hidden;//超出隐藏
text-overflow: ellipsis;//超出文本设置为...
display:-webkit-box;//将div1转换为盒子模型
-webkit-line-clamp: 2;//设置div1的文本为2行
-webkit-box-orient: vertical;//从顶部向底部垂直布置子元素
/*white-space: initial;*/
}
</style>
</head>
<body>
<div class="div1">
偶尔会觉得,生活就是无休止的烦恼纠缠的总和。想要健健康康,却总是身体不适;
想要安然入睡,却总是失眠多梦;想要平静度日,却总是风波不止。每天都在坚持,每天都在隐忍,
然而,再坚强的心,也无法长期硬撑。本以为每天努力的微笑,就能换来一个明朗的晴空,
一切却是徒劳无功。不想再虚假地笑了,也不会懦弱地哭了,那就这样面无表情地保持着一颗淡然的素心,
默默前行吧。
</div>


</body>
</html>

注意:若在div1上还有父级,设置了white-space:nowrap;若想实现此效果需要在div1中加上white-space:initial;还原换行;

原文地址:https://www.cnblogs.com/sq45711478/p/10437899.html