关于多余文本隐藏以“...”结尾

文章共321个字 读完大约需要1分钟

单行隐藏

1
2
3
4
5
6
.box-demo {
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

多行隐藏

在火狐浏览器下无效

1
2
3
4
5
6
7
8
.box-demo {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
width: 130px;
}

跨浏览器实现

  • 利用css伪元素定位来实现,缺点是每个浏览器解析不太一样,看起来不太自然。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.box-demo {
position: relative;
width: 130px;
height: 2.8em;
line-height: 1.4em;
overflow: hidden;
}

.box-demo::after {
content: "...";
font-weight: bold;
position: absolute;
bottom: 0;
right: 0;
padding-left: 20px;
background: -webkit-linear-gradient(to right, transparent, #fff 62%);
background: -o-linear-gradient(to right, transparent, #fff 62%);
background: -moz-linear-gradient(to right, transparent, #fff 62%);
background: linear-gradient(to right, transparent, #fff 62%);
}
  • JavaScript+css实现
1
2
3
<div id="ellipsis" class="ellipsis">
1961年,执导了京剧《香罗帕》在1981年被评选为全国优秀电视艺术加工文艺节目。1976年参与为毛主席录制传统戏曲曲艺节目,并在湖南拍摄过湘剧传统戏《追鱼记》等上百个湘剧剧目。
</div>
1
2
3
4
5
.box-demo {
width: 130px;
height: 2.8em;
line-height: 1.4em;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*
* @params
* num: 截取的字符串
* element: 元素ID
*/
function wordsHide(num, element) {
let contain = document.getElementById(element);
let maxSize = num;
let txt = contain.innerHTML;
if (txt.length > num) {
txt = txt.substring(0, num - 1) + "...";
contain.innerHTML = txt;
} else {
console.log("error")
}
};
wordsHide(30, 'ellipsis');

推荐文章

-->