text-overflow

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>

结果如下:

text-overflow:clip more text here

text-overflow:ellipsis more text here

text-overflow:clip 中文测试跟多更多

text-overflow:ellipsis 中文测试更多更多

评论

《 “text-overflow” 》 有 5 条评论

  1. zwwooooo 的头像

    这个属性我竟然没用过……

    1. 流年 的头像

      我也是看到篇文章才发现的

    2. wmtimes 的头像

      我到是用过,但是感觉太麻烦了。后来就不用了。

      1. 流年 的头像

        太麻烦指的是?

  2. fiture 的头像

    说明你不是写CSS滴,我说滴工作。。。