有时为了避免文本文字内容超出一定宽度后溢出，我们想要溢出的部分不显示但用省略号（...）显示，这个时候我们可以使用CSS text-overflow文本溢出省略号属性样式实现。

text-overflow样式语法结构

text-overflow语法：
text-overflow : clip | ellipsis

text-overflow参数值和解释：
clip : 　不显示省略标记（...），而是简单的裁切
ellipsis : 　当对象内文本溢出时显示省略标记（...）

text-overflow应用说明：
CSS text-overflow设置或检索是否使用一个省略号标记（...）标示对象内文本文字的溢出。

实现方法
1）、对象设置text-overflow:ellipsis;省略号样式

2）、使用nobr标签，强制让内容不换行（css换行、css不换行）。
 

css实现超出自动隐藏

<style type="text/css">
.textOverFlow {
width:300px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
border:1px solid #ddd;
}
</style>

通过text-overflow:ellipsis和overflow:hidden结合使用，实现超出隐藏的功能。