提示：android系统定制开发文章写完后，android系统定制开发目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
一、单行超出显示
描述：如果文字超出父元素指定宽度，文字会自动换行，而连续不间断数字和英文字母（没有其他字符）不会自动换行；
详细步骤：
- 第一步(不换行)：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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
效果图：
关键点：
//超出一行省略号white-space: nowrap; //禁止换行overflow: hidden;text-overflow: ellipsis; //...- 1
- 2
- 3
- 4
二、多行超出显示省略号
a.对于内核是的浏览器（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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
效果图：
关键点：
//超出两行省略号display: -webkit-box;overflow: hidden;-webkit-box-orient: vertical;line-clamp: 2;-webkit-line-clamp: 2; //显示几行- 1
- 2
- 3
- 4
- 5
- 6
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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
效果图：
关键点：
//超出两行省略号 .ellipsis::after{ content: "..."; display: inline; }- 1
- 2
- 3
- 4
- 5
（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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
效果图：
关键点：
//超出两行省略号 .content { ... overflow: hidden; padding-right: 12px; /* 留出省略号位置 */ position: relative; } .ellipsis{ position: absolute; right:10px; bottom: 0; }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12