这个标题其实已经是一个老生常谈的问题了。很多时候，比如网站最基本的文章列表，标题会很长，而显示列表的区域宽度却没有这么宽，这时候最正常的做法就是 让超出宽度的部分文字用省略号(…)来表示。通常做法是网站后台程序截取一定的字符然后输出到前台显示或者前台用javascript截取一定的字符，但 是通过控制字数来截取的话还是存在一个大问题的，因为中文和英文的字符宽度问题，这个字数不好控制，而且通用性较差。那么有没有更好的方法呢，比如直接用 CSS来解决的，当然是有的。

首先我们要知道单行文本是如何实现这个效果的，代码如下：

<style>
<p class="text"></p>
    .text{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>

请注意，以上三行代码缺一不可哦，那接下来我们就一一看一下给个的作用吧！
–>

text-overflow 

value分别为 clip | ellipsis | ellipsis-word
–>clip ：不显示省略标记（…），而是简单的裁切
–>ellipsis ：当对象内文本溢出时显示省略标记（…），省略标记插入的位置是最后一个字符
–>ellipsis-word：对象内文本溢出时显示省略标记（…），省略标记插入的位置是最后一个词（word）

text-overflow

是一个比较特殊的样式，因为我们可以用它代替我们通常所用的标题截取函数，而且这样做对搜索引擎更加友好，如：标题文件有50个汉字，而我们的列表可能只有400px的宽度。如果用标题截取函数，则标题不是完整的，如果我们用CSS样式text- overflow:ellipsis，输出的标题是完整的，只是受容器大小的局限不显示出来罢了（表现上是超出部分显示省略标记…）。

text-overflow: ellipsis

属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义：强制文本 在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）。只有这样才能实现溢出文本显示省略号的效果。

下一篇文章中，我们会一起分享一下多行文本的解决方法，但是不兼容只能在谷歌浏览器中或者移动端中使用，链接地址为：CSS中多行文本溢出显示省略号的方法