text-overflow

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<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个想法

评论已关闭。