text-overflow： clip |
ellipsis
clip：
不顯示省略標記（...），而是簡單的裁切。
ellipsis：
當物件內文字溢位時顯示省略標記（...）
設定或檢索是否使用乙個省略標記（...）標示物件內文字的溢位。對應的指令碼特性為textoverflow。
text-overflow屬性僅是註解，當文字溢位時是否顯示省略標記。並不具備其它的樣式屬性定義。要實現溢位時產生省略號的效果還須定義：強制文字在一行內顯示（white-space:nowrap）及溢位內容為隱藏（overflow:hidden），只有這樣才能實現溢位文字顯示省略號的效果。
從上面的表中我們可以看出，firefox對text-overflow:ellipsis 這一屬性支援不是很好。目前我還不知道用什麼方法能解決這個問題。請高手們不吝賜教。
下面看個例項：
doctype html執行效果（chrome）：>
<
html
>
<
head
>
<
title
>
text-overflow demo
title
>
<
meta
charset
=utf-8"
/>
<
style
>
.test_demo_clip
.test_demo_ellipsis
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
>
下面來看乙個高階應用：
doctype html執行效果（chrome）：>
<
html
>
<
head
>
<
title
>
text-overflow
title
>
<
meta
charset
="utf-8"
/>
<
style
>
.box
.box:hover
style
>
head
>
<
body
>
<
div
class
="box"
>
元和十年，予左遷九江郡司馬。明年秋，送客湓浦口。聞舟中夜彈琵琶者，
聽其音，錚錚然有京都聲。問其人，本長安倡女。嘗學琵琶於穆、曹二善才，
年長色衰，委身為賈人婦。遂命酒使快彈數曲，曲罷憫然。自敘少小時歡樂事，
今漂淪憔悴，轉徙於江湖間。予出官二年，恬然自安，感斯人言，是夕始覺有遷謫意。
因為長句，歌以贈之，凡六百一十二言，命曰《琵琶行》。
潯陽江頭夜送客，楓葉荻花秋瑟瑟。主人下馬客在船，舉酒欲飲無管弦。
醉不成歡慘將別，別時茫茫江浸月。忽聞水上琵琶聲，主人忘歸客不發。
尋聲暗問彈者誰，琵琶聲停欲語遲。移船相近邀相見，添酒回燈重開宴。
千呼萬喚始出來，猶抱琵琶半遮面。轉軸撥弦三兩聲，未成曲調先有情。
弦弦掩抑聲聲思，似訴平生不得意。低眉信手續續彈，說盡心中無限事。
輕攏慢捻抹復挑，初為霓裳後六么。大弦嘈嘈如急雨，小弦切切如私語。
嘈嘈切切錯雜彈，大珠小珠落玉盤。間關鶯語花底滑，幽咽泉流冰下難。
冰泉冷澀弦疑絕，疑絕不通聲暫歇。別有幽愁暗恨生，此時無聲勝有聲。
銀瓶乍破水漿迸，鐵騎突出刀槍鳴。曲終收撥當心畫，四弦一聲如裂帛。
東舟西舫悄無言，唯見江心秋月白。
沉吟放撥插弦中，整頓衣裳起斂容。自言本是京城女，家在蝦蟆陵下住。
十三學得琵琶成，名屬教坊第一部。曲罷曾教善才伏，妝成每被秋娘妒。
五陵年少爭纏頭，一曲紅綃不知數。鈿頭雲篦擊節碎，血色羅裙翻酒汙。
今年歡笑復明年，秋月春風等閒度。弟走從軍阿姨死，暮去朝來顏色故。
門前冷落鞍馬稀，老大嫁作商人婦。商人重利輕別離，前月浮梁買茶去。
去來江口守空船，繞船月明江水寒。夜深忽夢少年事，夢啼妝淚紅闌干。
我聞琵琶已嘆息，又聞此語重唧唧。同是天涯淪落人，相逢何必曾相識。
我從去年辭帝京，謫居臥病潯陽城。潯陽地僻無**，終歲不聞絲竹聲。
住近湓江地低濕，黃蘆苦竹繞宅生。其間旦暮聞何物，杜鵑啼血猿哀鳴。
春江花朝秋月夜，往往取酒還獨傾。豈無山歌與村笛，嘔啞嘲咋難為聽。
今夜聞君琵琶語，如聽仙樂耳暫明。莫辭更坐彈一曲，為君翻作琵琶行。
感我此言良久立，卻坐促弦弦轉急。淒淒不似向前聲，滿座重聞皆掩泣。
座中泣下誰最多？江州司馬青衫溼。
div>
body
>
html
>
預設狀態下只顯示文章的第一句話:
滑鼠移動到文字上顯示全篇文章內容:
還可以指定自己的字串，應使用省略號的位置。這樣做來修飾要顯示的文字字串。
CSS3屬性之五 text overflow
text overflow clip ellipsis clip 不顯示省略標記 而是簡單的裁切。ellipsis 當物件內文字溢位時顯示省略標記 設定或檢索是否使用乙個省略標記 標示物件內文字的溢位。對應的指令碼特性為textoverflow。text overflow屬性僅是註解，當文字溢位時是...
css3之transition過渡屬性
要實現過渡效果，必須規定兩項內容 div div hover 上例就會將原來的100畫素寬的元素在兩秒內變成300畫素寬，從而實現了過渡 多項改變 如需向多個樣式新增過渡效果，則新增多個屬性，由逗號隔開 div div hovertransition只是簡寫屬性，下面的 列出了所有的轉換屬性 屬性 ...
css3之背景屬性之background size
設定元素背景 background repeat repeat no repeat 設定背景影象的平鋪方式 預設repeat background position left top 設定元素的背景定位起點，預設值為left top background size auto 設定背景影象的尺寸大小，...