标签： 文本截断

text-overflow:ellipsis 配合 overflow:hidden 可以用来实现字符串截断显示为更多的效果，而不用精确截字输出。

text-overflow 的基本单值用法就连 IE6 都支持，所以是可以放心使用的。

默认值是 clip，即简单地分割，可能会导致字符显示一半； 而 ellipsis 可以截字然后补上 …，效果更好。

<style type="text/css" media="screen">
    #inner{border:1px solid #ccc;}
    #inner p{width:200px; white-space:nowrap; overflow:hidden;}
    #inner p.t1{text-overflow:clip;}
    #inner p.t2{text-overflow:ellipsis;}
</style>

<div id="inner">
    <p class="t1">text-overflow:clip  more text here</p>
    <p class="t2">text-overflow:ellipsis more text here</p>
    <p class="t1">text-overflow:clip  中文测试跟多更多</p>
    <p class="t2">text-overflow:ellipsis 中文测试更多更多</p>
</div>

结果如下：