CSS 文字的換行

由於響應式網頁技術的興起，間接造成排版上不小的挑戰和創新，其中的一小部分就是文字的排版，這篇就來介紹一下在 CSS 裏頭文字的斷行，為什麼要特別寫這一篇呢？因為在做這個 blog 的時候，我竟然也遇到了斷行的問題，解決了文字的斷行，又冒出來pre的斷行問題，不過最後總算是都解決了，就寫下這一篇作為紀錄。

在網頁裡頭文字斷行會遇到兩種情況，第一種就是單純的文字，第二種就是被pre所包覆的文字，通常在pre裏頭，都會是完整的呈現程式碼，也是最基本展現程式碼的標籤，或許是因為這樣子的差異，我們如果只將斷行的 CSS 設定在網頁上，對於pre內的程式碼是沒有作用的 ( 不過如果有設定overflow:scroll這種方式又另當別論 )，以下整理了所有斷行的方式，如果未來又遇到的話，也才有個比較完整的參考。

word-wrap

強迫文字斷行，預設是 normal 不會斷行，但這是針對過長的英文文字，如果是整段句子還是會斷行的，我們今天要讓英文字斷行，可以直接在 CSS 寫上word-wrap:break-word;，這樣過長的文字就會直接被折行，除了直接由外框寬度折行，也可以在過長的文字當中加入­這個瀏覽器不會顯示的語法，這樣子過長的英文字，就會在有加入­的地方折行，同時補上「-」的符號。( 也可以加入​這個代碼，但不會補「-」，只會補上空白 )
可以參考這個範例：http://codepen.io/oxxo/pen/nisIq

white-space

由於word-wrap只能讓英文單字換行，對於整段文章無法換行該怎麼做呢？這時候我們就需要用到white-space的屬性，有興趣的人也可以參考 w3schools 的 說明 和 範例，如果我們只是要單純地讓一段文章不要換行，可以使用white-space:nowrap;的方式，就可以讓一段文章不要換行，而這裡還有個有趣的小技巧，就是搭配overflow:hidden;和text-overflow:ellipsis;，還可以做出文字後方變成「...」的效果喔！

可以參考這個範例：http://codepen.io/oxxo/pen/GjFwL

除此之外，在面對pre標籤的時候，white-space:nowrap;就無用武之處了，這時候我們就必須使用white-space:pre-wrap;，如此一來，在pre內的文字和程式碼，也就會斷行囉！