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

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

css

語法

word-wrap:normal | break-word;
  • CSS3 已將 word-wrap 改名為 overflow-wrap
  • 由於歷史原因,當您使用 overflow-wrap 時,最好同時也使用 word-wrap,作為向下相容

使用說明及屬性定義

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

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

設定值

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

範例

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

div {
    word-wrap: normal;
}
wordwordwordwordwordwordwordwordwordwordword

發表迴響