關於CSS3文本換行的方法

一、

目前可被主流支持的:

 text-overflow 主要解決文本溢出,

取值:clip[ 默認值 ] | ellipsis | string(僅支持Firefox)

配合   white-space : nowrap ; overflow : hidden  使用


二、

word-wrap

取值:normal [ 默認值 ] | break-word

--長單詞換行


word-break 

取值:normal  [ 默認值 ] | break-all | keep-all

--非CJK("中日韓")腳本的斷行規則


break-all允許在單詞內換行。
keep-all只能在半角空格或連字符處換行。

潛規則——默認情況下(不寫任何樣式情況下的顯示規則):

①單詞末尾放不下:另起一行,

②長單詞過長且字母連續:不折斷

③長單詞過長且帶破折號:保守折斷 


重點:下述常用的三種樣式針對上述3種潛規則進行改進的區別


word-wrap:break-word  長單詞過長且字母連續:吻合折斷

                                             [  潛規則 不變]  


word-break:keep-all       長單詞過長且帶破折號:不折斷

                                            [ 改③ 潛規則 不變]


word-break:break-all      單詞末尾放不下          :吻合折斷

                                            長單詞過長且字母連續:吻合折斷

                                                  長單詞過長且帶破折號:吻合折斷

                                                      [最強:潛規則 ③全部改變]    


保守折斷是按一定格式折斷,吻合折斷是不留任何邊界空白的折斷



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章