多行文本溢出省略号显示,有较大兼容性问题,适合于webkit浏览器或移动端,因为移动端大部分浏览器是webkit内核。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 150px;
height: 65px;
background-color: pink;
margin: 100px auto;
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 3;
/* 兼容性 */
line-clamp: 3;
/* 设置或者检索伸缩盒子对象的子元素的排列方式 */
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div>环紫金山绿道环紫金山绿道规划总长度约25公里,始于琵琶湖公园,沿景区内环线、环陵路、岔路口、蒋王庙街、樱花路、板仓街至索道下站。实现与公交、地铁等城市交通无缝对接,满足了广大市民休闲健身的需要。</div>
</body>
</html>