一、目标
通过css实现多行文字溢出时以省略号进行表示，效果如图
二、代码编写
所有代码：
<!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: 100px;
height: 40px;
margin: 50px auto;
background-color: pink;
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div>
一二三四五六七八九十百千万
</div>
</body>
</html>核心代码：
/*溢出隐藏*/
overflow: hidden;
/*以省略号表示*/
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;三、注意事项
1、有较大兼容性问题，适用于webkit内核浏览器和移动端
2、规定第n行显示省略号，超过或不到第n行的文字都不会以省略号表示。所以最好将盒子高度控制在恰好可显示n行。
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
