css控制多出文本省略显示省略号

这种情况很多见，尤其是现在常做的cms前端显示时。以前用过Jstl，c:if至少两次，还需要截取。这肯定是非常麻烦的，而且截多少合适呢？中文英文的占的字符还是不一样的。所以，css来控制这个最好不过了。

但是，每一个简单的方法后面，加上环境的复杂性学问就多了。这就是政治课上说的，具体问题具体分析。

我们经常在一个新闻列表页看到一个个新闻标题链接，使用元素是a（锚点）元素。

html： this is a overlong text...

css: .sample {

width:100px;  --必须定义一个宽度

display:block;  --a是一个inline元素，是不能使用overflow:hidden的。必须将其设置成block 

white-space: nowrap;  --强制文本在一行显示

overflow: hidden;  --超出的文本隐藏显示

text-overflow:ellipsis;  --超出的文本用省略号代替

}

text-overflow属性值：clip|ellipsis|ellipsis-word(截取文本|截取文本多余用省略号代替|省略号后显示最后一个字符）

--IE、Webkit内核浏览器（chrome，safari，360和搜狗的高速模式）：text-overflow

--Opera: -o-text-overflow

--Firefox: 不支持

对于Firefox的特别解决办法：可以用伪类的解决办法，也可以用firefox支持的XUL

>伪类：

.sample:after { content: "...";}

>UXL:

首先这需要一个ellipsis.xml文件

 xmlns="http://www.mozilla.org/xbl" xmlns:xbl="http://www.mozilla.org/xbl" xmlns :xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

 id="ellipsis">

 crop="end"  xbl:inherits="value=xbl:text">

调用：css -moz-binding:url(ellipsis.xml#ellipsis);