您的位置：首页 > 其它

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

2017-04-07 15:32 260 查看

<!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;还原换行；

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航