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才能显示省略标记的效果。