css3 text-overflow属性

页面：

    <ul>
        <li>· 测试测试测试测试测试测试</li>
        <li>· 测试测试测试测试测试测试</li>
        <li>· 测试测试测试测试测试测试</li>
        <li>· 测试测试测试测试测试测试</li>
        <li>· 测试测试测试测试测试测试</li>
    </ul>

css：

            li{
            　　line-height: 22px;
            　　font-size: 12px;
            　　border-bottom: 1px solid #ccc;
            　　width: 120px; /* 设置宽度 */
            　　overflow: hidden;/* 溢出内容设为隐藏 */
            　　white-space:nowrap ;/* 强制文本单行显示 */
            　　text-overflow:ellipsis;/* 设置溢出文本显示为省略标记 */
        　　}

效果：

说明：在上述例子中仅设置text-overflow属性是不够的。必须设置文本外围的宽度、溢出内容为隐藏（overflow:hidden）、强制文本单行显示（white-space:nowrap）,这样设置的text-overflow属性值ellipsis才能显示省略标记的效果。