CSS中span内容超出部分以...显示

使用text-overflow:ellipsis对溢出文本显示省略号有两个好处：
一是不用通过程序限定字数；
二是有利于SEO。需要使用对对溢出文本显示省略号的通常是文章标题列表，这样处理对搜索引擎更友好，因为标题实际上并未被截字，而是局限于宽度而未被显示而已。

设置span的属性为：

<style type="text/css">
    span{
        overflow: hidden; 
        text-overflow: ellipsis; 
        -o-text-overflow: ellipsis;
        white-space:nowrap;
        width:240px;
        height:24px;
        display:block;
    }
</style>

其中，
overflow: hidden和white-space: nowrap都是必须的否则不会显示省略号；
-o-text-overflow: ellipsis针对Opera；
而宽度的设定主要是针对IE6；
该方法支持Internet Explorer, Safari, Chrome 和 Opera，但FF并不支持，不过可以通过Jquery来实现类似的效果。
下载这个Jquery插件：jQuery ellipsis plugin
调用方法：

$(document).ready(function() {
    $('.ellipsis').ellipsis();
}

其次，溢出隐藏必须设置元素的宽或者高，因为你不确定宽或者高，也就不知道它超出什么范围才隐藏；
最后，因为只有块级元素才能设置宽和高，而span是行内元素，要转换成块级元素用代码display:block。

overflow属性介绍：

定义和用法

overflow 属性规定当内容溢出元素框时发生的事情。

说明

这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

默认值：	visible
继承性：	no
版本：	CSS2
JavaScript 语法：	object.style.overflow="scroll"

可能的值

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

text-overflow属性介绍：

定义和用法

text-overflow 属性规定当文本溢出包含元素时发生的事情。

默认值：	clip
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.textOverflow="ellipsis"

语法

text-overflow: clip|ellipsis|string;

值	描述	测试
clip	修剪文本。	测试
ellipsis	显示省略符号来代表被修剪的文本。	测试
string	使用给定的字符串来代表被修剪的文本。