網頁設計客戶問答集:為什麼我的文字會超出去或斷在奇怪的地方?
我們常常遇到客戶反應文字會超出框框或者是自動斷行,其實這是因為瀏覽器預設會讓一個單詞維持在同一行,如果單詞超出一行的寬度時,就會自動往下一行排列。通常這只會發生在CJK(Chinese 中文, Japanese 日文, Korean 韓文)以外的語言,例如英文等用單詞為字母拼成的語言。
因為CJK語言本身一個字就是一個字元,並不會從中被截開,會遇到上述問題就是標題或內文包含了英文單字,
而且因為不同裝置有不同的網頁寬度,文字隨著寬度變窄,當寬度不足容納單字長度時,就會繼續換行呈現。
不過針對換行也有一些CSS設定能夠調整,一起來看看吧!
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 讓文字能夠左右對齊容器。