溢出隐藏在前端开发里是给常见的效果, 不过以前的 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