用 CSS 实现文字超出自动截断并显示“...”

作者：vkvi 来源：ITPOW（原创）日期：2010-2-9

p
{
    width:100px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

把文字放在 p 中，当文字超过 p 的宽度后，就会被截断，并在后面显示三个点“...”。

兼容性

text-overflow 原是 IE 私有属性，现已经写入 CSS 3 标准。

IE、Chrome 4 中测试通过，Firefox 3.6 中 text-overflow 测试无效。