单行溢出
![单行溢出](https://i-blog.csdnimg.cn/blog_migrate/23e1656dcf1b6bddc2aa633b5d893d05.png)
<!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>
p{
width: 200px;
height: 45px;
border: 1px solid red;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<p>明德慎罚没事的麻烦啊没地方马尔默阿萨德麻烦啊额买的方案</p>
</body>
</html>
- 确定的宽度
- white-space: nowrap;(不换行)
- overflow: hidden;(溢出不显示)
- text-overflow: ellipsis;(文本溢出显示…)
多行溢出
必须是拥有webkit内核的浏览器才行(兼容性)
![多行溢出](https://i-blog.csdnimg.cn/blog_migrate/4dd6da2c80a4966ab7558b084a0d1d1a.png)
<!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>
p{
width: 200px;
height: 45px;
border: 1px solid red;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<p>明德慎罚没事的麻烦啊没地方马尔默阿萨德麻烦啊额买的方案</p>
</body>
</html>
- 确定的宽度
- display: -webkit-box;
- -webkit-line-clamp: 2;(自定义行数)
- -webkit-box-orient: vertical;
- overflow: hidden;(溢出不显示)
- text-overflow: ellipsis;(文本溢出显示…)
利用插件Clamp.js
<!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>
p{
width: 200px;
height: 45px;
border: 1px solid red;
}
</style>
</head>
<body>
<p>明德慎罚没事的麻烦啊没地方马尔默阿萨德麻烦啊额买的方案明德慎罚没事的麻烦啊没地方马尔默阿萨德麻烦啊额买的方案</p>
<script src="./clamp.js"></script>
<script>
var p = document.getElementsByTagName('p')[0];
$clamp(p, {clamp: 2});
</script>
</body>
</html>
GitHub地址:Clamp.js
或者是支持一下小编:Clamp.js