淘先锋技术网

首页 1 2 3 4 5 6 7

div中只显示2行文字并且溢出隐藏（适用于响应式或移动端） 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div溢出隐藏</title>
<style type="text/css">
.test{
width: 400px;
margin:40px auto;
overflow: hidden;/*内容溢出隐藏*/
text-overflow: ellipsis;//*溢出的文本显示为...*/
display:-webkit-box;/*将div转换为盒子模型*/
-webkit-line-clamp: 2;/*设置div的文本为2行*/
-webkit-box-orient: vertical;/*从顶部向底部垂直布置子元素*/
/*white-space: initial;*/
}
</style>
</head>
<body>
<div class="test">
中央空调定期清洗对机器以及对用户的身体健康都是有一定的好处的。中央空调以其舒适、美观、耐用等优点，被广泛应用于写字楼、超市、大型商场、宾馆酒店、医院等等场所，但是，据相关部门统计，我国公共场所中央空调清洗率很低。接下来请跟随小编一起来看看公共场所清洗率偏低原因。
</div>


</body>
</html>

注意：若在div上还有父级，设置了white-space:nowrap;若想实现此效果需再给div加上white-space:initial;还原换行；