CSS英文單詞強制換行、強制不換行和顯示省略號

最近更新時間 2020-11-29 16:16:43

默認情況下英文單詞和中文能正常換行顯示,不需進行特殊處理。如果單詞很長會超出邊框顯示,如下所示:

Honorificabilitu Taumatawhakatangihangakoauauotamateaturipukak CSS 屬性 word-break 指定了怎樣在單詞內斷行。Black Friday Deals on Apple Products Continue

強制換行

使用 word-break:break-all; 進行強制換行,前一個是使用 break-word 按單詞換行,後一個使用 break-all 的效果,如下所示:

Honorificabilitu Taumatawhakatangihangakoauauotamateaturipukak CSS 屬性 word-break 指定了怎樣在單詞內斷行。Black Friday Deals on Apple Products Continue
Honorificabilitu Taumatawhakatangihangakoauauotamateaturipukak CSS 屬性 word-break 指定了怎樣在單詞內斷行。Black Friday Deals on Apple Products Continue
/*按單詞強制換行*/
.breakWord {
  word-break: break-word; 
  overflow-wrap: break-word;
  word-wrap: break-word;  /* IE */
}
/*按單任意字符換行*/
.breakAll {
  word-break: break-all; 
}

注意:IE 不支持 word-break 的 break-word 值,IE 中使用微軟的一個私有屬性 word-wrap: break-word; 在 CSS3 規範中被重命名為 overflow-wrap。

強制不換行

使用 white-space: nowrap; 進行強制不換行換行,超過區域不顯示使用 overflow: hidden;。如需顯示省略號使用 text-overflow:ellipsis;。下面兩個示例中第一個超出部分顯示省略號,後一個只使用 white-space,如下所示:

Honorificabilitu Taumatawhakatangihan
Honorificabilitu Taumatawhakatangihan
/*強制不換行,超出部分顯示省略號*/
.nowrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*強制不換行*/
.nowrap {
  white-space: nowrap;
}
rss_feed