css text overflows and hides several lines

Overflow hiding is a common effect in front-end development, but the previous CSS can only achieve 1 line of text overflow hiding

webkit has an informal style-webkit-line-clamp, which can set several lines of text overflow hiding.
Although it is an informal style, it is basically compatible on the mobile terminal.

The use of -webkit-line-clamp needs to cooperate with other styles, see demo below for details

<!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 text overflows and hides several lines

Guess you like