首页 > 代码库 > div中只显示2行文字超出隐藏
div中只显示2行文字超出隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div1{
width: 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;还原换行；
div中只显示2行文字超出隐藏
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。