1.单行文本溢出显示省略号,文本溢出部分显示...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.test {
width: 200px;
border-bottom: 1px solid #000;
}
/* 单行超出范围显示省略号 */
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
<body>
<div class="test ellipsis">
天下武功唯快不破；天下武功唯快不破；天下武功唯快不破；天下武功唯快不破；天下武功唯快不破；天下武功唯快不破；
</div>
</body>
</html>
效果.png
1.1.overflow 属性规定当内容溢出元素框时发生的事情。
overflow.png
1.2.text-overflow 属性规定当文本溢出包含元素时发生的事情。
text-overflow.png
1.3. white-space 属性设置如何处理文本中的空白符（比如空格和换行符）。
white-space.png
2.多行文本溢出显示省略号,文本溢出部分显示...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.test {
width: 145px;
border: 1px solid #000;
}
/* 单行超出范围显示省略号 */
.ellipsis {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
</style>
<body>
<div class="test ellipsis">
天下武功唯快不破；
天下武功唯快不破；
天下武功唯快不破；
天下武功唯快不破；
</div>
</body>
</html>
效果.png
在WebKit浏览器或移动端（绝大部分是WebKit内核的浏览器）的页面实现比较简单，可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp ；注意：这是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中
注意：浏览器不兼容的就只能通过js处理
分享我发现一个好用的插件
vue-ellipsis 在此感谢作者：hyjiacan
