CSS3屬性之五:text-overflow

語法:

text-overflowclip | 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):

默認狀態下只顯示文章的第一句話:

鼠標移動到文字上顯示全篇文章內容:

還可以指定自己的字符串,應使用省略號的位置。這樣做來修飾要顯示的文本字符串。

轉自:http://www.cnblogs.com/lianjun/archive/2011/03/24/1993479.html
發佈了18 篇原創文章 · 獲贊 10 · 訪問量 16萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章