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

2022-06-20
    內容大綱

我們常常遇到客戶反應文字會超出框框或者是自動斷行,其實這是因為瀏覽器預設會讓一個單詞維持在同一行,如果單詞超出一行的寬度時,就會自動往下一行排列。通常這只會發生在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 讓文字能夠左右對齊容器。

 


其它資訊