LOGO

MIS 腳印

記錄 IT 學習的軌跡

CSS word-wrap 是否允許英文單字自動斷行

撰寫網頁時,一定都有遇過英文單字過長,導致文字溢出至容器外。CSS word-wrap 屬性,可以設定是否允許英文單字自動斷行。通常保持預設值就可以了,但在某些狀況下,例如寬、高度固定的『最新文章、熱門文章』,因為需把標題文字容納在固定的容器中,這時就需允許自動斷行了。

CSS

用法

語法

word-wrap:normal | break-word;

使用說明及屬性定義

用來標明是否允許瀏覽器在單字內進行斷行,這是為了防止當一個字串太長而找不到它的自然斷行點時產生溢出的現象。

預設值normal
繼承yes
版本CSS3
JavaScript 語法object.style.wordWrap="break-word"
相關屬性word-break

設定值

說明
normal允許內容頂開或溢出指定的容器邊界。
break-word内容將在邊界內換行。(如果需要,單字內部允許斷行)

範例

normal(預設)它會溢出它的父容器外,因為這時它是不允許被截斷的,所以就沖出去了。

wordwordwordwordword

參考資料


發表迴響