css--換行相關的幾個屬性white-space word-wrap word-break

標籤：blog   http   ar   問題   html   log   sp   htm   c   

今天遇到一個問題，把table裡面的內容全部換成這行的，在td裡添加屬性word-break:break-all即可。

 

對比幾個換行相關的屬性，做下總結：

white-space : normal  自然顯示，也就是文本碰到容器壁之後自動換行

white-space : nowrap   強制文本在同一行，除非遇到</br>

 

word-wrap : break-word

自然顯示下長單詞會挪到下一行就顯示，並且，如果單詞長過容器寬度就會伸出去。word-wrap : break-word的作用就是長單詞依然會挪到下一行顯示，但是不會讓它超過容器寬度而是讓它碰壁之後折行。

 

word-break : break-all

它的神奇作用在於，長單詞不會挪到下一行顯示了，依舊和短單詞一樣一次排列顯示，在這個基礎上碰到容器壁之後再折行。

 

感謝http://www.cnblogs.com/2050/archive/2012/08/10/2632256.html的詳細講解！

css--換行相關的幾個屬性white-space word-wrap word-break