css 文本若干行溢出隐藏

溢出隐藏在前端开发里是给常见的效果, 不过以前的 css 只能实现1行的文本溢出隐藏

webkit 有个非正式的样式 -webkit-line-clamp, 可以设置若干行的文本溢出隐藏
虽然是非正式样式, 但在移动端基本都能兼容

-webkit-line-clamp 的使用需要与其它样式合作, 详见下 demo

<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<title>溢出隐藏</title>
	<style>
		.box {
    
    
			outline: 1px #f00 solid;
			margin: 10px;
			width: 300px;
		}

		.box1 {
    
    
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.box2 {
    
    
			overflow: hidden;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}

		.box3 {
    
    
			overflow: hidden;
			display: -webkit-box;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
		}
	</style>
</head>

<body>
	<div class="box">
		(原文)PC端多浏览器不兼容,用在手机端还是可以接受的.李**表示：“我真的很抱歉让他们失望，我尽我所能，但我必须承认谌龙打的比我好，他准备的很充分。我今天也打的比伦敦奥运和其他比赛好，但今天不是我的日子，不过我也没有放弃。我很遗憾，只能第三次获得银牌。”
	</div>
	<div class="box box1">
		(1行溢出)PC端多浏览器不兼容,用在手机端还是可以接受的.李**表示：“我真的很抱歉让他们失望，我尽我所能，但我必须承认谌龙打的比我好，他准备的很充分。我今天也打的比伦敦奥运和其他比赛好，但今天不是我的日子，不过我也没有放弃。我很遗憾，只能第三次获得银牌。”
	</div>
	<div class="box box2">
		(2行溢出)PC端多浏览器不兼容,用在手机端还是可以接受的.李**表示：“我真的很抱歉让他们失望，我尽我所能，但我必须承认谌龙打的比我好，他准备的很充分。我今天也打的比伦敦奥运和其他比赛好，但今天不是我的日子，不过我也没有放弃。我很遗憾，只能第三次获得银牌。”
	</div>
	<div class="box box3">
		(3行溢出)PC端多浏览器不兼容,用在手机端还是可以接受的.李**表示：“我真的很抱歉让他们失望，我尽我所能，但我必须承认谌龙打的比我好，他准备的很充分。我今天也打的比伦敦奥运和其他比赛好，但今天不是我的日子，不过我也没有放弃。我很遗憾，只能第三次获得银牌。”
	</div>
</body>

</html>

end

css 文本若干行溢出隐藏

猜你喜欢