CSS / 前端技術 / 筆記 · 2022-02-10

CSS Word 文字屬性

word-wrap 英文單字屬性

針對英文單字強迫斷行與不斷行屬性,設定是否超出div範圍。

/* css範例 */

div {
  word-wrap: normal|break-word|initial|inherit;
}

設定值

normal預設值,空白字元換行,允許同一行保留完整單字
break-word過長單字強迫斷行
initial默認斷行屬性
inherit繼承父元素word-wrap屬性(非所有瀏覽器支援,不建議使用)

word-break 亞洲文字屬性

針對亞洲語言(Chinese, Japan, Korea)及非亞洲語言文字斷行設定。
PS . Opera 及 Firefox 不支援 word-break 的屬性

/* css範例 */

div {
  word-break: normal | keep-all | break-all
}

設定值

normal預設值,根據亞洲語言(Chinese, Japan, Korea)及非亞洲語言文字斷行規則
keep-all不允許斷行
break-all斷行(IE 才支援)
break-word任意斷行
initial默認斷行屬性
inherit繼承父元素word-break屬性(非所有瀏覽器支援,不建議使用)

word-spacing 文字間距

單字間距

/* css範例 */

p {
  word-spacing: 30px;
}

設定值

normal預設值(0.25em)
length長度,以 px、pt、cm、em 等為單位,允許使用負值。
initial默認斷行屬性
inherit繼承父元素word-spacing屬性(非所有瀏覽器支援,不建議使用)