什么是超出显示省略号
在网页设计中，经常需要对一些长文本进行截取，以节省页面的空间，这时候我们就需要考虑如何在超出部分显示省略号。超出显示省略号是一种截取文本的方式，当文本长度超过指定的宽度时，自动将文本截取并在截断处显示省略号。这种方式又称为“文本溢出截断”或“文本截断省略号”。
如何用CSS实现超出显示省略号
超出显示省略号可以用CSS中的text-overflow属性来实现，其语法如下：
text-overflow: clip | ellipsis | string | initial | inherit;1. clip
默认值为clip，当文本被截断时，被截断部分将不会被显示，而是被隐藏。这种方式下并不会显示省略号。
p {
text-overflow: clip;
overflow: hidden;
white-space: nowrap;
}
说明：使用clip方式只需要配合overflow:hidden;和white-space:nowrap;属性即可。
2. ellipsis
设置为ellipsis时，文本被截断时，被截断部分将会以“...”代替。但是，这种方式要求必须配合overflow:hidden;和white-space:nowrap;属性，而且只适用于单行文本。
p {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
说明：适用于单行文本，在多行文本上无效。
3. string
string属性允许你指定一个字符串来代替省略号。这个字符串必须包含在双引号或者单引号内。当字符串的长度大于截取长度时，会被省略号替代。
p {
text-overflow: "|...";
overflow: hidden;
white-space: nowrap;
}
说明：使用string时，需指定字符串，并配合overflow:hidden;和white-space:nowrap;属性使用。
如何应用超出显示省略号
通常情况下，我们可以将超出显示省略号应用在以下场景：
1. 表格内容超过宽度限制
在表格中展示数据时，如果某个单元格的内容超过了规定宽度，可以使用超出显示省略号来进行截断。
table{
border-collapse:collapse;
}
td{
width:100px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
2. 悬浮提示
当悬浮在某个元素上时，可以使用超出显示省略号来显示被截取的文字，鼠标悬浮时再显示完整的文字。
span{
display:inline-block;
width:100px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
span:hover{
white-space:normal;
}
3. 轮播图标题
在轮播图中通常会设置一个标题，当标题长度过长时，可以使用超出显示省略号来截断标题。
h2{
width:200px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
注意事项
虽然超出显示省略号看起来很简单，但在实际应用中，有些情况下可能会出现问题。以下是一些注意事项：
1. 只适用于单行
超出显示省略号只适用于单行文本，如果需要将多行文本截断并显示省略号，可以考虑使用JS计算每行文字的宽度，并手动添加省略号。
2. 必须设置宽度
为了使文本能够被截断并显示省略号，文本所在的容器必须设置固定的宽度，否则超出显示省略号无法生效。
3. 只能截取文本
超出显示省略号只能截取文本，对于图片等非文本内容，无法使用这种方式进行截取。
4. 兼容性问题
虽然超出显示省略号在现代浏览器中得到广泛支持，但在IE8及以下版本的IE浏览器中无法生效。
总结
超出显示省略号是一个很常用的技巧，在合理应用的情况下，可以有效的节省页面空间，提高页面的美观度。