单行和多行文本溢出显示省略号如何实现（CSS实现单行、多行文本溢出显示省略号（…））
导读：提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档...
提示：文章写完后 ，目录可以自动生成 ，如何生成可参考右边的帮助文档
一 、单行超出显示省略号
描述：如果文字超出父元素指定宽度 ，文字会自动换行 ，而连续不间断数字和英文字母（没有其他字符）不会自动换行；
详细步骤： 第一步(不换行)：white-space:nowrop;（对于连续的数字或者英文字母可省略） 第二步（溢出隐藏）overflow:hidden; 第三步（文本溢出显示省略号）text-overflow：ellipsis;(省略号)直接看代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>单行省略号</title> <style> .app { width: 400px; height: 28px; line-height: 28px; margin: 50px 0 0 50px; border: 1px solid red; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } </style> </head> <body> <div class="app"> <span class="content">你问我为何时常沉默 ，有的人无话可说 ，有的话无人可说.你问我为何时常沉默 ，有的人无话可说 ，有的话无人可说.</span> </div> </body> </html>效果图：
关键点： //超出一行省略号 white-space: nowrap; //禁止换行 overflow: hidden; text-overflow: ellipsis; //...二 、多行超出显示省略号
a.对于内核是webkit的浏览器（Google/Safari）,可以直接用CSS样式；
溢出隐藏：overflow: hidden; 省略号：text-overflow: ellipsis; display: -webkit-box; 弹性盒模型： 设置弹性盒子的子元素的排列方式 ：-webkit-box-orient: vertical; 设置显示文本的行数：-webkit-line-clamp: 3; (最多显示3行)直接看代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>多行省略号</title> <style> .content { display: -webkit-box; width: 400px; line-height: 1.5; margin: 50px 0 0 50px; border: 1px solid red; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } </style> </head> <body> <div class="app"> <span class="content">你问我为何时常沉默 ，有的人无话可说 ，有的话无人可说.你问我为何时常沉默 ，有的人无话可说 ，有的话无人可说. </span> </div> </body> </html>效果图：
关键点：
//超出两行省略号 display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; line-clamp: 2; -webkit-line-clamp: 2; //显示几行b.兼容各种浏览器的方法
（1）利用伪类(IE6/IE7不支持)
直接看代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>多行省略号</title> <style> .content { display: inline-block; width: 400px; height: 56px; line-height: 28px; margin: 50px 0 0 50px; border: 1px solid red overflow: hidden; } .ellipsis::after{ content: "..."; display: inline; } </style> </head> <body> <div class="app"> <span class="content">你问我为何时常沉默 ，有的人无话可说 ，有的话无人可说.你问我为何时常沉默 ，有的人无话可说 ，有的话无人可说. </span> <span class="ellipsis"></span> </div> </body> </html>效果图：
关键点：
//超出两行省略号 .ellipsis::after{ content: "..."; display: inline; }（2）利用定位和padding-right
直接看代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>desktop demo</title> <style> .content { width: 400px; height: 56px; line-height: 28px; margin: 50px 0 0 50px; border: 1px solid red; overflow: hidden; padding-right: 12px; /* 留出省略号位置 */ position: relative; } .ellipsis{ position: absolute; right:10px; bottom: 0; } </style> </head> <body> <div class="content">你问我为何时常沉默 ，有的人无话可说 ，有的话无人可说.你问我为何时常沉默 ，有的人无话可说 ，有的话无人可说. <span class="ellipsis">...</span> </div> </body> </html>效果图：
关键点： //超出两行省略号 .content { ... overflow: hidden; padding-right: 12px; /* 留出省略号位置 */ position: relative; } .ellipsis{ position: absolute; right:10px; bottom: 0; }
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！