style換行問題

1、style換行問題轉word-break:break-all禾Hword-wrap:break-word區(qū)另卄；以及text-oveflowIDiv的內容自動換行（轉載）word-break:break-all和word-wrap:break-word都是能使其容器如DIV的內容自動換行 它們的區(qū)別就在于:1,word-break:break-all例如div寬200px，它 的內容就會到200px自動換行，如果該行末端 有個英文單詞很長（congratulation等），它會 把單詞截斷，變成該行末端為conra（congratulation的前端部分），下一行為tulation（congu

2、atulation）的后端部分了。2,word-wrap:break-word例子與上面一樣，但 區(qū)別就是它會把congratulation整個單詞看成一 個整體，如果該行末端寬度不夠顯示整個單詞， 它會自動把整個單詞放到下一行，而不會把單詞 截斷掉的。3, word-break;break-all支持版本：IE5以行為與亞洲語言的normal相同。也允許非亞洲語言文本行的任意字內斷開。該值適合包含一些 非亞洲文本的亞洲文本。WORD-WRAP:break-word支持版本：IE5.5以 上 內容將在邊界內換行。如果需要，詞內換行(word-break )也將發(fā)生。表格自動換行， 避免撐 開。

3、word-break : no rmal | break-all| kee p-all參數(shù)：normal :依照亞洲語言和非亞洲語言的文本規(guī)則，允許在字內換行break-all :該行為與亞洲語言的normal相同。也允許非亞洲 語言文本行的任意字內斷開。該值適合包含一些 非亞洲文本的亞洲文本kee p-all :與所有非亞洲語言的normal相同。對于中文，韓文，日 文，不允許字斷開。適合包含少量亞洲文本的非 亞洲文本 語法：word-wrap : normal | break-word參數(shù)：normal :定的容器邊界break-word :換行。如果需要，詞內換行(word-break)

4、也行 發(fā)生說明：設置或檢索當當前行超過指定容器的 邊界時是否斷開轉行。對應的腳本特性為wordWrap。請參閱我編寫的 其他書目。語法：table-layout : auto | fixed參 數(shù)：auto :默認的自動算法。布局將基于各允許內容頂開指內容將在邊界內單元格的內容。表格在每一單元格讀取計算之后 才會顯示出來。速度很慢fixed :算法。在這算法中，水平布局是僅僅基于表格的 寬度，表格邊框的寬度，單元格間距，列的寬度, 而和表格內容無關說明：設置或檢索表格的布局 算法。對應的腳本特性為tableLayout。建議：word-break用3C檢測會顯示問題的， 導致百度快照也會出問題

5、-這個屬性OPERA FIREFOX瀏覽器也不支持word-break屬性可 以用white-space:normal;FireFox和IE下就都能正確換行，而且要注意， 單詞間的空格不能用來代替，不然不能正確換 行。所以，綜上，最好的方式是word-wra p:break-word;overflow:hidde n;而不是word-wrap:break-word;word-break:break-all;。word-wrap:break-word;overflow:auto;在ie下沒 有任何問題。在ff下，長串會被遮住部分內容。 并且,div含有的元素的dis play應為block;固定

6、布局的來代替，這樣在div style=overflow:auto; div自動出來水 垂直:overflow_y導致百度快照也會出問題-這個屬性FIREFOX瀏覽器也不支持word-break屬性可以用white-space:normal;來代替，這樣在FireFox和IE下就都能正確換行，而且要注意，單詞間的空格不能用來代替，不然不 能正確換行。自動換行問題,正常字符的換行是比較合理的，而 連續(xù)的中的內容超長時，平:overflow x建議：word-break用3C檢測會顯示問題的，0P ERA數(shù)字和英文字符常常將容器撐大，挺讓人 頭疼,下面介紹的是CSS如何實現(xiàn)換行的方法對于div,P

7、等塊級元素正常文字的換行（亞洲文字和非亞洲文字）元素擁 有默認的white-space:normal,當定義的寬度之 后自動換行html正常文字的換行（亞洲文字和非亞洲文字）元素擁有默認的white-space:normal,當定義 css#wra pwhite-s pace: normal; width:20 Op x; 1.（IE瀏覽器）連續(xù)的英文字符和阿拉伯數(shù)字 使用word-wrap :break-word ;或者word-break:break-all;實現(xiàn)強制斷行#wra pword-break:break-all; width:200p x;或者#wra pword-wra p:

8、break-word; width:20 Op x;vdivid=wra pabcdefghijklm nabcdefghjklm nabcdefghjklm n111111111v/div效果：可以實現(xiàn)換行2.（Firefox瀏覽器）連續(xù)的英文字符和阿拉伯數(shù) 字的斷行,Firefox的所有版本的沒有解決這個問 題，我們只有讓超出邊界的字符隱藏或者，給容器 添加滾動條#wra pword-break:break-all; width:20 Opx;overflow:auto;abcdefghijklm nabcdefghjklm nabcdefghijklm n111111111v/div效果

9、：容器正常，內容隱藏 對于table1. （IE瀏覽器）使用table-layout:fixed;強制table的寬度，多余內容隱藏vtable style=table-layout:fixedwidth=200abcdefghigklm nopq rstuvwxyz1234567890ssssssssssssss效果：隱藏多余內容2.（IE瀏覽器）使用table-layout:fixed;強制table的寬度，內層td,th采用word-break : break-all;或者word-wrap : break-word ;換行abcdefghigklm nopq rstuvwxyz1234

10、567890abcdefghigklm nop qrstuvwxyz1234567890效果：可以換行3. （IE瀏覽器）在td,th中嵌套div,p等采用上面提 到的div,p的換行方法4.（Firefox瀏覽器）使用table-layout:fixed;強制table的寬度,內層td,th采用word-break :break-all;或者word-wrap : break-word ;換行， 使用overflow:hidden;隱藏超出內容，這里overflow:auto;無法起作用vtable style=table-layout:fixedwidth=200abcdefghigklm nop qrstuvwxyz1234567890abcdefghigklm nop qrstuvwxyz1234567890v/table效果：隱藏多于內容5.（Firefox瀏