内容两行显示,以…结束,不多说,直接整个页面代码
一看就明白
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>测试</title>
<style type="text/css">
#content {
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
width:150px;
margin:0 auto;
}
#content p:after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
background: #FFF;
padding-left: 6px;
}
</style>
</head>
<body>
<div id="content">
不要习惯了黑暗就为黑暗辩护;不要嘲讽那些比自己更勇敢热情的人们;
</div>
</body>
</html>