CSS3属性之五：text-overflow

语法：

text-overflow ： clip | ellipsis

取值：

clip：

不显示省略标记（...），而是简单的裁切。

ellipsis：

当对象内文本溢出时显示省略标记（...）

说明：

1. 设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。对应的脚本特性为textOverflow。
2. text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果。  

兼容性：

text-overflow : clip 

text-overflow : ellipsis 

从上面的表中我们可以看出，Firefox对text-overflow:ellipsis 这一属性支持不是很好。目前我还不知道用什么方法能解决这个问题。请高手们不吝赐教。

下面看个实例：

    
    

     
     <!
     
     DOCTYPE html
     
     >
     
     

     
     <
     
     html
     
     >
     
     

     
     <
     
     head
     
     >
     
     

     
     <
     
     title
     
     >
     
     text-overflow demo
     
     </
     
     title
     
     >
     
     

     
     <
     
     meta 
     
     charset
     
     =utf-8" 
     
     />
     
     

     
     <
     
     style
     
     >
     
     
.test_demo_clip 
     
     {
     
     
 text-overflow
     
     :
     
     clip
     
     ;
     
      
 overflow
     
     :
     
     hidden
     
     ;
     
      
 white-space
     
     :
     
     nowrap
     
     ;
     
      
 width
     
     :
     
     200px
     
     ;
     
      
 background
     
     :
     
     #ccc
     
     ;
     
     

     
     }
     
     
.test_demo_ellipsis 
     
     {
     
     
 text-overflow
     
     :
     
     ellipsis
     
     ;
     
      
 overflow
     
     :
     
     hidden
     
     ;
     
      
 white-space
     
     :
     
     nowrap
     
     ;
     
      
 width
     
     :
     
     200px
     
     ;
     
      
 background
     
     :
     
     #ccc
     
     ;
     
     

     
     }
     
     

     
     </
     
     style
     
     >
     
     

     
     </
     
     head
     
     >
     
     

     
     <
     
     body
     
     >
     
     

     
     <
     
     h2
     
     >
     
     text-overflow : clip 
     
     </
     
     h2
     
     >
     
     
 
     
     <
     
     div 
     
     class
     
     ="test_demo_clip"
     
     >
     
     
 不显示省略标记，而是简单的裁切条

     
     </
     
     div
     
     >
     
     

     
     <
     
     h2
     
     >
     
     text-overflow : ellipsis 
     
     </
     
     h2
     
     >
     
     

     
     <
     
     div 
     
     class
     
     ="test_demo_ellipsis"
     
     >
     
     
 当对象内文本溢出时显示省略标记

     
     </
     
     div
     
     >
     
     

     
     </
     
     body
     
     >
     
     

     
     </
     
     html
     
     >
    
    

运行效果（Chrome）：

下面来看一个高级应用：

    
    

     
     <!
     
     DOCTYPE html
     
     >
     
     

     
     <
     
     html
     
     >
     
     

     
     <
     
     head
     
     >
     
     

     
     <
     
     title
     
     >
     
     text-overflow
     
     </
     
     title
     
     >
     
     

     
     <
     
     meta 
     
     charset
     
     ="utf-8"
     
      
     
     />
     
     

     
     <
     
     style
     
     >
     
     
.box 
     
     {
     
     
 text-overflow
     
     :
     
     ellipsis
     
     ;
     
     
 -o-text-overflow
     
     :
     
     ellipsis
     
     ;
     
     
 overflow
     
     :
     
     hidden
     
     ;
     
     
 white-space
     
     :
     
     nowrap
     
     ;
     
     
 border
     
     :
     
     1px solid #000
     
     ;
     
     
 width
     
     :
     
     400px
     
     ;
     
     
 padding
     
     :
     
     20px
     
     ;
     
     
 color
     
     :
     
     rgba(0, 0, 0, .7)
     
     ;
     
     
 cursor
     
     :
     
     pointer
     
     ;
     
     

     
     }
     
     

.box:hover 
     
     {
     
     
 white-space
     
     :
     
     normal
     
     ;
     
     
 color
     
     :
     
     rgba(0, 0, 0, 1)
     
     ;
     
     
 background
     
     :
     
     #e3e3e3
     
     ;
     
     
 border
     
     :
     
     1px solid #666
     
     ;
     
     

     
     }
     
     

     
     </
     
     style
     
     >
     
     

     
     </
     
     head
     
     >
     
     

     
     <
     
     body
     
     >
     
     

     
     <
     
     div 
     
     class
     
     ="box"
     
     >
     
     
元和十年，予左迁九江郡司马。明年秋，送客湓浦口。闻舟中夜弹琵琶者，
    
    
    
    

     
     听其音，铮铮然有京都声。问其人，本长安倡女。尝学琵琶于穆、曹二善才，
    
    
    
    

     
     年长色衰，委身为贾人妇。遂命酒使快弹数曲，曲罢悯然。自叙少小时欢乐事，
    
    
    
    

     
     今漂沦憔悴，转徙于江湖间。予出官二年，恬然自安，感斯人言，是夕始觉有迁谪意。
    
    
    
    

     
     因为长句，歌以赠之，凡六百一十二言，命曰《琵琶行》。

浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。
醉不成欢惨将别，别时茫茫江浸月。忽闻水上琵琶声，主人忘归客不发。
寻声暗问弹者谁，琵琶声停欲语迟。移船相近邀相见，添酒回灯重开宴。
千呼万唤始出来，犹抱琵琶半遮面。转轴拨弦三两声，未成曲调先有情。
弦弦掩抑声声思，似诉平生不得意。低眉信手续续弹，说尽心中无限事。
轻拢慢捻抹复挑，初为霓裳后六幺。大弦嘈嘈如急雨，小弦切切如私语。
嘈嘈切切错杂弹，大珠小珠落玉盘。间关莺语花底滑，幽咽泉流冰下难。
冰泉冷涩弦疑绝，疑绝不通声暂歇。别有幽愁暗恨生，此时无声胜有声。
银瓶乍破水浆迸，铁骑突出刀枪鸣。曲终收拨当心画，四弦一声如裂帛。
东舟西舫悄无言，唯见江心秋月白。
沉吟放拨插弦中，整顿衣裳起敛容。自言本是京城女，家在虾蟆陵下住。
十三学得琵琶成，名属教坊第一部。曲罢曾教善才伏，妆成每被秋娘妒。
五陵年少争缠头，一曲红绡不知数。钿头云篦击节碎，血色罗裙翻酒污。
今年欢笑复明年，秋月春风等闲度。弟走从军阿姨死，暮去朝来颜色故。
门前冷落鞍马稀，老大嫁作商人妇。商人重利轻别离，前月浮梁买茶去。
去来江口守空船，绕船月明江水寒。夜深忽梦少年事，梦啼妆泪红阑干。
我闻琵琶已叹息，又闻此语重唧唧。同是天涯沦落人，相逢何必曾相识。
我从去年辞帝京，谪居卧病浔阳城。浔阳地僻无音乐，终岁不闻丝竹声。
住近湓江地低湿，黄芦苦竹绕宅生。其间旦暮闻何物，杜鹃啼血猿哀鸣。
春江花朝秋月夜，往往取酒还独倾。岂无山歌与村笛，呕哑嘲咋难为听。
今夜闻君琵琶语，如听仙乐耳暂明。莫辞更坐弹一曲，为君翻作琵琶行。
感我此言良久立，却坐促弦弦转急。凄凄不似向前声，满座重闻皆掩泣。
座中泣下谁最多？江州司马青衫湿。

     
     </
     
     div
     
     >
     
     

     
     </
     
     body
     
     >
     
     

     
     </
     
     html
     
     >
    
    

运行效果（Chrome）：

默认状态下只显示文章的第一句话:

鼠标移动到文字上显示全篇文章内容:

还可以指定自己的字符串，应使用省略号的位置。这样做来修饰要显示的文本字符串。