单行

 .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】css文字超出显示省略号/文字超过三行显示省略号..相关推荐

html文字...点击后全部显示,js 文字超出部分隐藏、点击显示更多示例
这篇文章主要为大家详细介绍了js 文字超出部分隐藏.点击显示更多示例,具有一定的参考价值,可以用来参考一下. 感兴趣js 文字超出部分隐藏.点击显示更多示例的小伙伴,下面一起跟随512笔记的小编罗X来 ...
html隐藏文字点击查看更多,js 文字超出部分隐藏、点击显示更多示例
感兴趣js 文字超出部分隐藏.点击显示更多示例的小伙伴,下面一起跟随编程之家 jb51.cc的小编来看看吧. css: *{ padding: 0; margin: 0; } .text-hide{ ...
Vue 文本超过三行展示省略号，并加上展开和收起的功能
场景:在vue项目中文本超过三行展示省略号,并加上展开和收起的功能在处理多行文本时,经常会遇到各种各样的需求,比如至多展示三行,多余的部分不展示并以省略号结尾:又比如在这个基础上加上一个展开和收起的 ...
知识点------文字超出（单行，两行）显示省略号（...）
文字超出单行不换行,显示省略号 .word {overflow: hidden;text-overflow: ellipsis;white-space: nowrap; --------------- ...
【CSS】文字超过三行显示省略号...
代码: <!DOCTYPE html > <html ><head><meta http-equiv="Content-Type" con ...
html - - - 文字超过三行显示省略号，文字超过几行显示省略号
代码 /* 文字三行以上显示省略号 */ overflow: hidden; /*超出内容隐藏*/ text-overflow: ellipsis; /*超出内容为省略号*/ display: -we ...
CSS笔试题-不超过三行显示全部内容，超过三行隐藏剩余内容并显示省略号
<style>ol {overflow: hidden;/* 向用户发出未显示的溢出内容的信号: */text-overflow: ellipsis;display: -webkit-bo ...
标题文字超出2行则隐藏后面显示省略号
css小技巧 overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-b ...
CSS 超过三行显示...
width: 400px; display: -webkit-box; -webkit-box-orient: vertical; 显示的行数需结合 display: -webkit-box,-we ...

【CSS】css文字超出显示省略号/文字超过三行显示省略号..

单行

多行

代码

效果图

【CSS】css文字超出显示省略号/文字超过三行显示省略号..相关推荐

最新文章

热门文章