word-break

語法:

word-break:normal | keep-all | break-all | break-word

預設值normal

適用於:所有元素

繼承性:有

動畫性:否

計算值:指定值

相關屬性word-wrap/overflow-wrap

媒 體:視覺

取值:

normal:
預設的換行規則。依據各自語言的規則,允許在字間發生換行。
keep-all:
對於 CJK(中文,韓文,日文)文字不允許在字符內發生換行。Non-CJK 文字表現同normal
break-all:
對於 Non-CJK 文字允許在任意字符內發生換行。該值適合包含一些非亞洲文字的亞洲文字,比如使連續的英文字符斷行。
break-word:
break-all相同,不同的地方在於它要求一個沒有斷行破發點的詞必須保持為一個整體單位。這與word-wrapbreak-word值效果相同

說明:

定義元素內容文字的字間與字符間的換行行為。
  • 作為IE的私有屬性之一,IE5.5率先實現了word-break,後期被w3c采納成標准屬性;
  • 對於解決防止頁面中出現連續無意義的長字符打破布局,應該使用break-all | break-word屬性值;
  • 同為強制打斷單詞的break-allbreak-word的兩個值,需要了解她們間的主要區別(下述2個示例需要在webkit/blink瀏覽器下查看):

    break-all:

    做一個示例讓大家更好的區分wordbreakbreakword與wordbreakbreakall的實際應用效果
    .test1 { word-break: break-all; }

    break-all會在文字內容遇見邊界時,強制將文字打斷換行,而不考慮單詞是否是完整的一個單位

    break-word:

    做一個示例讓大家更好的區分wordbreakbreakword與wordbreakbreakall的實際應用效果
    .test2 { word-break: break-word; }

    break-word同樣也會在文字內容遇見邊界時,強制將文字打斷換行,不同的在於它會考慮單詞是否完整,如果目前行無法放下需要被打斷的單詞,為了保持完整性,會將整個單詞放到下一行進行展示

  • 對應的腳本特性為:wordBreak

兼容性:

  • 淺綠 = 支援
  • 紅色 = 不支援
  • 粉色 = 部分支援
Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 8.0+ 40.0+ 40.0+ 8.0+ 40.0+ 8.0+ 4.4+ 28.0+
keep-all 8.0+ 40.0+ 40.0-43.0 8.0 40.0+ 8.0-8.4 4.4-43.0 28.0-43.0
44.0+ 9.0+ 9.0+ 44.0+ 44.0+
break-word #1 8.0-16.0 40.0-58.0 40.0-43.0 8.0 40.0+ 8.0-8.4 4.4-43.0 28.0-43.0
44.0+ 9.0+ 9.0+ 44.0+ 44.0+
  1. Safari, Chrome, Opera 以及其他 WebKit/Blink 內核瀏覽器還支援break-word屬性值,不過對於版本的支援性,上述表格資料不一定準確。

示例: