.png?v=1647475200)
.jpg?v=1697597433)
網頁設計客戶問答集：為什麼我的文字會超出去或斷在奇怪的地方？
我們常常遇到客戶反應文字會超出框框或者是自動斷行，其實這是因為瀏覽器預設會讓一個單詞維持在同一行，如果單詞超出一行的寬度時，就會自動往下一行排列。
這通常只會發生在非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 讓文字能夠左右對齊容器。