divはCSS(変換)を利用して長い英字の自動行折り返しを実現_html/css_WEB-ITnose

原文地址: http://www.jz123.cn/text/0715896.html

自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法

最佳CSS定义换行代码

.wrap { table-layout:fixed; word-break: break-all; overflow:hidden; }
这里 overflow:hidden;或者 auto；
=================================================================

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

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

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

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

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

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

效果：可以实现换行

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

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

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

効果: コンテナーは通常であり、コンテンツは非表示になります

テーブルの場合: (IE ブラウザー) table-layout:fixed を使用してテーブルの幅を強制し、余分なコンテンツを非表示にします

< table style="table-layout:fixed" width="200">

abcdefghigklmnopqrstuvwxyz1234567890sssssssssssss




効果:冗長なコンテンツを非表示にする

2.(IE ブラウザ) table-layout:fixed; を使用してテーブルの幅を強制します。th は word-break:break-all または word-wrap:break-word; を使用します。ブレーク

効果: 行を折り返すことができます

3. (IE Browse 4. (Firefox ブラウザ) table-layout: fixed; を使用して、表の幅を強制的に、内側の層 td、th を使用します word-break : Break-all; または word -wrap : Break-word ; 行を折り返し、overflow:auto; を使用して余分なコンテンツを非表示にします

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890

< td width="75 %" style="word-wrap : Break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890

abcdefghigklmnopqrstuvwxyz1234567890

効果: コンテンツ以外も非表示にします

5. Firefox ブラウザ) div、p などを td、th などに入れます。上記の方法を使用して Firefox に対処します
コードボックスを実行します
最後に、この現象が発生する可能性は非常に低いですが、ネチズンの可能性は排除できませんなりすまし。

上記の例の効果は次のとおりです

table,td,th,div {}{ border:1px green solid;}
code {}{ font-family:"Courier New", Courier, monospace;}


div
すべての空白:通常。
<; div style ="white-space:normal; width:200px;" > Wordwrap は、noWrap プロパティが true に設定されている場合でも、WIDTH 属性がセルのラップされていないコンテンツよりも小さい値に設定されている td 要素で発生します。 したがって、このシナリオでは、WIDTH 属性が noWrap プロパティよりも優先されます

< h1 > <;コード > IE ワードラップ : ブレイクワード ;
<; div style ="ワードラップ : ブレイクワード ; 幅:200px;" > abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111
IE ワードブレーク:ブレークオール;
<; div style ="word-break:break-all;width:200px;" > abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

< h1 > <;コード > Firefox/ ワードブレイク:ブレイクオール; オーバーフロー:自動;
<; div style ="word-break:break-all; width:200px; overflow:auto;" > abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111
テーブル コード > h1 >
テーブルレイアウト:固定;
<; table style ="table-layout:fixed" width ="200" >

abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss


テーブルレイアウト:固定; 単語区切り: すべて区切り; ワードラップ : ブレイクワード ;
<;テーブル幅 ="200" スタイル ="テーブルレイアウト:固定;" >
<; tr>
<; td width ="25%" style ="word-break : break-all; " > abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss


FF テーブルレイアウト:固定; オーバーフロー:非表示;
<; table style ="table-layout:fixed" width ="200" >