单行文本
单行文本溢出显示省略号必须满足三个条件：
- white-space:nowrap; 强制一行内显示文本
- overflow:hidden; 超出的部分隐藏
- text-overflow:ellipsis 文字用省略号代替超出的部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单行文本溢出显示省略号</title>
<style>
div{
width: 150px;
height: 30px;
background-color: rgb(180, 190, 90);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>地方和奈拉蒂考时间费拉达斯距离放假啊三大</div>
</body>
</html>
结果演示
多行文本
多行文本溢出显示省略号，有较大兼容性问题，适合用于webkit浏览器内核
多行文本溢出显示省略号条件：
overflow:hidden; text-overflow:ellipsis; 弹性伸缩盒子模型显示 display:-webkit-box; 限制一个块元素显示的文本的行数、 -webkit-line-clamp:2; 让里面所有的孩子垂直居中 -webkit-box-orient:vertical;
