文本換行的三個屬性
- 三屬性分別爲word-wrap、word-break、white-space.
瀏覽器默認換行方式
- 對於西文來說,以空格爲間隔,每行容納儘量多的單詞,若整行無空格且超出瀏覽器顯示邊緣,則橫向撐開瀏覽器邊緣,並不換行
- 對於中文來說,則不論是否有空格,無法撐開瀏覽器邊緣,到瀏覽器邊緣則自動換行
接着我們來討論word-wrap
- word-wrap: normal/break-word;
- normal 即瀏覽器默認
- break-word 中文與默認同效,西文爲每行容納儘量多的單詞,若整行無空格且超出瀏覽器邊緣,則在邊緣處強制換行
接着是break-word
- break-word: normal/break-all/keep-all;
- normal 即瀏覽器默認
- break-all 中文與默認同效,西文爲每行容納儘量多的字符,瀏覽器邊緣處強制換行
- keep-all 中文以標點符號或空格爲間隔,可將間隔符間的字符串視爲字符串塊,每行容納儘量多的字符串塊。西文與瀏覽器默認同效。
最後white-space
- white-space: normal/nowrap;
- normal 即瀏覽器默認
- nowrap 不論中文西文,不論是否有標點或空格,若文本過長,則橫向撐開瀏覽器邊緣