在html中如果要把多余的文字显示为省略号。有几种方法的，学习下。
第一种：
使用CSS属性：text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web前端之家</title>
<style type="text/css">
.box{
width: 200px;
background-color: aqua;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="box">Web前端之家Web前端之家Web前端之家Web前端之家Web前端之家Web前端之家Web前端之家Web前端之家</div>
</body>
</html>第二种：
利用-webkit-line-clamp属性。
.box{
width: 200px;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
border:solid 1px black;
}缺点：仅适用于webkit内核或移动端页面。在火狐，ie等浏览器并不支持。
第三种：
2.用伪元素模拟实现
设定固定宽高，多余部分隐藏，在结尾用包含省略号（...）的元素覆盖部分内容。
.box{
height: 200px;
width: 200px;
position:relative;
line-height:1.4em;
height:4.2em;
overflow:hidden;
}
.box::after {
content:"...";
font-weight:bold;
position:absolute;
bottom:0;
right:0;
padding:0 -20px 1px 45px;
background-color:white;
}这里用一个包含了省略号，且背景色为白色的伪元素遮盖了部分内容。高度height 是行高 line-height 的三倍。需要显示几行文字就设置为几倍。
这种思路实现较为简单，兼容性也比较好。
网友评论文明上网理性发言 已有0人参与
发表评论: