前端——单行文字溢出省略与多行文字溢出省略
单行文字省略样式代码,添加对应的class即可
.text-ellipsis{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>单行文字溢出省略</title>
<style>
* {
margin: 0;
padding: 0;
}
.container {
margin: 20px auto;
width: 300px;
border: 1px solid #eee;
}
li {
display: block;
list-style: none;
color: rgb(158, 152, 152);
border-bottom: 1px dashed rgb(158, 152, 152);
margin: 10px;
}
.text-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li class="text-ellipsis">
文字文字文字文字文字文字文字文字文字文字文字文字文字文字
</li>
<li class="text-ellipsis">
文字文字文字文字文字文字文字文字文字文字文字文字文字文字
</li>
<li class="text-ellipsis">
文字文字文字文字文字文字文字文字文字文字文字文字文字文字
</li>
<li class="text-ellipsis">
文字文字文字文字文字文字文字文字文字文字文字文字文字文字
</li>
<li class="text-ellipsis">
文字文字文字文字文字文字文字文字文字文字文字文字文字文字
</li>
</ul>
</div>
</body>
</html>
效果:
多行文字省略样式代码,添加对应的class即可
.multiline-ellipsis{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
/* 设置文字显示行数 */
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal !important;
word-wrap: break-word;
}
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>多行文字溢出省略</title>
<style>
.container {
width: 300px;
margin: 20px auto;
border: 1px solid rgb(155, 147, 147);
}
.multiline-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
/* 设置文字显示行数 */
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal !important;
word-wrap: break-word;
}
</style>
</head>
<body>
<div class="container">
<h3>岳阳楼记</h3>
<p class="multiline-ellipsis">
庆历四年春,滕子京谪守巴陵郡。越明年,政通人和,百废具兴,乃重修岳阳楼,增其旧制,刻唐贤今人诗赋于其上,属予作文以记之。<br />
予观夫巴陵胜状,在洞庭一湖。衔远山,吞长江,浩浩汤汤,横无际涯,朝晖夕阴,气象万千,此则岳阳楼之大观也,前人之述备矣。然则北通巫峡,南极潇湘,迁客骚人,多会于此,览物之情,得无异乎?<br />
若夫淫雨霏霏,连月不开,阴风怒号,浊浪排空,日星隐曜,山岳潜形,商旅不行,樯倾楫摧,薄暮冥冥,虎啸猿啼。登斯楼也,则有去国怀乡,忧谗畏讥,满目萧然,感极而悲者矣。<br />
至若春和景明,波澜不惊,上下天光,一碧万顷,沙鸥翔集,锦鳞游泳,岸芷汀兰,郁郁青青。而或长烟一空,皓月千里,浮光跃金,静影沉璧,渔歌互答,此乐何极!登斯楼也,则有心旷神怡,宠辱偕忘,把酒临风,其喜洋洋者矣。<br />
嗟夫!予尝求古仁人之心,或异二者之为,何哉?不以物喜,不以己悲,居庙堂之高则忧其民,处江湖之远则忧其君。是进亦忧,退亦忧。然则何时而乐耶?其必曰“先天下之忧而忧,后天下之乐而乐”乎!噫!微斯人,吾谁与归?<br />
时六年九月十五日。
</p>
</div>
</body>
</html>
效果: