淺談 html- table換行

  這么久都沒有來發表點總結了，看了園里的盆友發表的文章中，我發現自己也長進了不少。

  但是，最近兩天遇見了一個比較棘手的問題，就是在做web頁面時，我用了一個table，這個頁面是要供手機端調用的，所以在查看列表的時候（尤其是在查看評論這方面最常用），發現沒有支持換行，在PC上看是沒問題的，就是在手機端瀏覽的時候可能由於發表的內容過程致使頁面不能換行，所以提出了可不可以支持一下換行的功能。可以呀，折騰了半天總算整出來了。以下是我總結的方法，希望能對一些盆友提供一些幫助吧。

 首先介紹一個css控制table控制換行的標識：

word-break，有兩個屬性break-all，keep-all。第一種是強制性的換行，第二種則相反，就是強制性的不換行。

用法：可以在是否要換行的td標簽中加上這個屬性，這樣就可以控制td內容是否換行了。

但是問題又來了，那就是中文和英文的不同時。自動換行問題,正常字符的換行是比較合理的,而連續的數字和英文字符常常將容器撐大,挺讓人頭疼,下面介紹的是CSS如何實現換行的方法

那就是

style="table-layout: fixed"
style="word-wrap: break-word"  這兩句很好用，而且也符合此時的需求。

但是怎么用呢，都加到table一行嗎？試了試不行，效果實現不了，那是加到td里？試試還是不行，那就剩一種了，就是第一句加table里，第二句加td里結果居然實現了。

< table width="500" style=" table -layout:fixed;">
<tr>
<td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</ table >

效果實現了。