单行

	.p1{/*单行*/
          white-space:nowrap;
          overflow:hidden;
          text-overflow:ellipsis;
		}

多行

   .p2{/*多行*/
	    overflow: hidden;
	    text-overflow: ellipsis;
	    display: -webkit-box;
	    -webkit-line-clamp: 3;/*想省略几行就写几*/
	    -webkit-box-orient: vertical;
    }

代码

<!DOCTYPE html >
<html >
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
		<title>【CSS】css文字超出显示省略号/文字超过三行显示省略号..</title>
		<style type="text/css">
			.p1{/*单行*/
                white-space:nowrap;
                overflow:hidden;
                text-overflow:ellipsis;
			  
            }
            .p2{/*多行*/
                overflow: hidden;
			    text-overflow: ellipsis;
			    display: -webkit-box;
			    -webkit-line-clamp: 3;/*想省略几行就写几*/
			    -webkit-box-orient: vertical;
            }
		</style>
	</head>
	<body>
        <p class="p1">我们也进入了梦乡。一觉醒来时，正是一个寂静的冬日之晨。窗台上堆着厚厚的积雪，就像铺上了一层暖和的棉花；窗框看上去宽了些。玻璃上结着冰纹，看起来黯淡而冷清，相比之下，屋内就显得愈加温暖舒适。这份静谧真是令人难以忘怀。伴着地板的吱吱声响，我们走向了窗边，透过玻璃上透明的一角举目眺望远处的田野。屋顶上早已是白雪皑皑；屋檐下、篱笆上到处垂着钟乳石般的冰挂；院子里，一根根石笋状的冰柱伫立着，里面藏匿着什么，我们不得而知。玉树和灌木奋力地将琼枝向四面八方伸展着，想环抱天空；墙壁和篱笆，经过整夜的银装素裹后，在有些朦胧的氛围中，向两侧欢呼雀跃地扭动着曼妙的身姿，仿佛大自然一夜间重新设计了一幅田园风光，供人类的艺术家临摹。</p>
		<p class="p2">微风徐徐地吹拂着，羽毛般轻落在百叶窗上，发出喁喁细语；偶尔又似夏日的晚风，卷起沉沉落叶，发出阵阵叹息。田鼠早已蛰伏在林地温暖的洞穴里，猫头鹰也已栖息在沼泽深处的一棵空心树中。兔子、松鼠，还有狐狸，都已纷纷回到了各自的巢穴。看门的狗静静地躺在壁炉边，牛羊一动不动地站在栏圈里。大地也沉睡了，不过，不必担心它会一睡不醒，这只是它一年行将结束之际的首次休憩而已。夜深了，四周几乎万籁俱寂，除了街上某个招牌或木屋的门不时地嘎吱作响，给寂寥的大自然些许慰藉外，别无所闻。而恰是茫茫宇宙中，金星和火星之间这唯一的声响，这于凡人看来不胜荒凉的声响，却让我们许久未曾触及的心底涌现出一抹暖意，一种诸神际会时才有的神圣的欢愉和友善。大地酣眠着，可空中的雪花却不曾停歇，它们飘飘洒洒地从天而降，仿佛某个北方的五谷女神，正把银色的谷粒撒向无垠的田野。</p>
	</body>
</html>

效果图

css文字超出显示省略号

原文链接：https://blog.csdn.net/weixin_38179690/article/details/110074243