首頁  >  文章  >  web前端  >  使用CSS3文本換行的方法介紹

使用CSS3文本換行的方法介紹

高洛峰
高洛峰原創
2017-03-23 10:26:522928瀏覽

一、

目前可由主流支援的:

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

取值:clip[ 預設值] | ellipsis | string (僅支援Firefox)

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

二、

word-wrap 

取值:normal [預設值] | break-word

--長字換行

word-break  

取值:normal  [ 預設值] | break-all | keep-all 

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

使用CSS3文本換行的方法介紹

#潛規則-預設(不寫任何樣式的顯示規則):

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

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

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

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

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

                              

word-break:keep-all       長字過長且帶破折號        [ 改③ 潛規則 ①②不變]

word-break:break-all      字末          :吻合處折斷 

#                  地                長字過長度且有破折號:吻合處折斷 

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

#保守折斷是依照一定格式折斷,吻合處則是不留任何邊界空白的折斷

以上是使用CSS3文本換行的方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn