CSS Web ページのレイアウトで DIV と TABLE が幅を超える場合の自動行折り返しの分析_html/css_WEB-ITnose

自动换行问题，正常字符的换行是比较合理的，而连续的数字和英文字符常常将容器撑大，挺让人头疼，在52CSS.com中不乏这方面的文章，现在总结一下CSS如何实现换行的方法，只要在CSS中定义了如下句子，可保网页不会再被撑开了。

　　对于div,p等块级元素
　　正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行

Example Source Code [www.52css.com]

　　html 
　　

正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义

　　css 
　　#wrap{white-space:normal; width:200px; }

　　IE浏览器
　　连续的英文字符和阿拉伯数字,使用word-wrap: break-word ;或者word-break:break-all;实现强制断行

Example Source Code [www.52css.com]

　　html 
　　

52csscom52csscom52csscom52csscom52csscom52csscom

　　css 
　　#wrap{word-break:break-all; width:200px;}

　　或者 

Example Source Code [www.52css.com]

　　#wrap{word-wrap:break-word; width:200px;}

　　Firefox浏览器
　　连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题, 剧情家我们只有让超出边界的字符隐藏或者,给容器添加滚动条

Example Source Code [www.52css.com]

　　html 
　　

52csscom52csscom52csscom52csscom52csscom52csscom

css
#wrap{word-break:break-all; width:200px; overflow:auto;}

テーブル要素の場合

1. table-layout:fixed; を使用します。テーブル、過剰なコンテンツは非表示



ソース コード例 [www.52css.com]

52csscom52csscom52csscom52csscom52cs scom52csscom

2. 内側の td,th は word-break:break-all を使用します。 word-wrap:break-word ;改行


ソースコード例 [www.52css.com]

< /table>

3. 上記の div、p 行の折り返しメソッドを使用して、div、p などをネストします
Firefox ブラウザ

1. table-layout を使用します。固定; table の幅を強制するには、内側の層 td,th は word-break:break-all; または word-wrap:break-word; を使用し、内側の層を超えて非表示にするために、overflow:hidden; を使用します。 :auto; ここでは動作できません



ソースコードの例 [www.52css.com]

52csscom52csscom52csscom52csscom52csscom52csscom

52csscom52csscom52csscom52csscom52cs scom52csscom& lt;/td> ;

="25%" style="ワードブレイク : ブレークワード; オーバーフロー:非表示; ">52csscom52csscom52csscom52csscom52csscom52csscom

< ;/tr>

52csscom52csscom52 csscom52csscom52csscom52csscom

2. Firefox に対処するために上記の方法を使用して、td、th に div、p などをネストします。
最高の CSS 定義改行コード

ソースコード例 [www.52css.com]

.wrap { table-layout:fixed: overflow:hidden; }