CSS3属性之：text-overflow

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）：

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

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

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