網頁設計客戶問答集:為什麼我的文字會超出去或斷在奇怪的地方?

2022-06-20
    Article outline

我們常常遇到客戶反應文字會超出框框或者是自動斷行,其實這是因為瀏覽器預設會讓一個單詞維持在同一行,如果單詞超出一行的寬度時,就會自動往下一行排列。

這通常只會發生在非CJK(Chinese 中文, Japanese 日文, Korean 韓文)的語言。

因為CJK語言本身一個字就是一個字元,並不會從中被截開,會遇到上述問題就是標題或內文有英文單字,且因為不同裝置有不同的網頁寬度,文字隨著寬度變窄,當寬度不足容納單字長度時,就會繼續換行呈現。

 

不過針對換行也有一些CSS設定能夠調整,一起來看看吧! 

 

.a {
    word-break: normal; /* 預設 */
}
.b {
    word-break: keep-all; /* 遇到"-"時斷行 */
}
.c {
    word-break: break-all; /* 以字母為單位換行 */
}
.d {
    word-break: break-word; /* 以單詞為單位換行 */
}

Thisissomeveryveryveryverylong word. Words will break according to usual rules.

Thisissomeveryveryveryverylong word. This text will-break-at-hyphens.

Thisissomeveryveryveryverylong word. This text will break at any character, includes the longlonglonglonglong word.

Thisissomeveryveryveryverylong word. The longlonglonglonglong word will break at arbitrary points.

 

從上面的範例可以看到,雖然 break-all能夠根據容器寬度把詞語從中直接斷行,避免有多餘的空白,但同時一個單字也就無法完整呈現,在閱讀上會有很大的問題。

因此我們通常不會建議客戶去調整斷行的設定,而是根本的去調整內文長度,或是設定 text-align: justify 讓文字能夠左右對齊容器。

 


Other Articles