在使用HTML+CSS排版的时候经常出遇到一个问题：某一行内容的长度无法确定，而网页上留的空间就那么大，如果字符过多就会影响排版；单纯的使用overflow:hidden来截断字符串又会给人一种段落（或标题）已经结束的错觉。
最好的方法就是如上图那样，在将要超出区域的前几个字符变成省略号，后面的全隐藏了。下面就说一下用CSS的实现方法，只需要三行，上代码：
p {
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
}
其中，wite-space:nowrap规定当文本内容一行显示不完时不换行；
text-overflow:ellipsis规定当文本超出时显示省略号而不是简单的裁切；
overflow:hidden规定内容超出区域时裁切。
本文链接：https://icewing.cc/post/css-text-overflow.html
-- EOF --
作者
Jerry Bendy
发表于
2013-10-18 17:51:31
，添加在分类
2013年
下
，并被添加「
CSS
」标签
，最后修改于
2017-03-12 07:34:40
Comments
注：如果长时间无法加载，请针对 disq.us | disquscdn.com | disqus.com 启用代理。