CSSテーブルでの長文テキストの表示問題cells_html/css_WEB-ITnose

自動行折り返しの問題。通常の文字の行折り返しはより合理的ですが、連続する数字や英語の文字はコンテナを拡張することが多く、これは非常に面倒です。 CSS が行折り返しを実装する方法は次のとおりです

div、p ブロックレベル要素の場合。

通常のテキストの折り返し (アジアのテキストと非アジアのテキスト) 要素にはデフォルトのwhite-space:normalがあり、定義された幅の後で自動的に折り返されます

html

<div id="wrap">折り返し (アジアのテキストと非アジアのテキスト) 要素には、定義されている場合、デフォルトのwhite-space:normal があります</div>

css

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

1 (IE ブラウザ) 連続した英語文字とアラビア数字の場合は、word-wrap:break-word; または word-break:break-all; を使用して、強制改行を実現します。 }

or

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

<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>

効果: 行の折り返しを実現できます

2 (Firefox ブラウザ) 連続した英語文字とアラビア数字が壊れています。Firefox のすべてのバージョンでは、境界を越えた文字を非表示にするか、コンテナにスクロール バーを追加することしかできません。 -all; width:200px; overflow:auto;}

<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>

テーブル

のコンテンツは非表示になります

1 . (IEブラウザ デバイス) table-layout:fixed を使用して表の幅を強制し、余分なコンテンツを非表示にします

<table width="200">

<tr>

<td>abcdefghigklmnopqrstuvwxyz1234567890sssssssssssss

</tr>

</table>

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

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

改行

3. (IE ブラウザ) td, th で div、p などをネストする場合は、前述の div、p の行折り返し方法を使用します

4. Firefox ブラウザ) table-layout:fixed; を使用してテーブルの幅を強制し、内部 TD を使用します。word-break:break-all または word-wrap:break-word; を使用します。余分なコンテンツを非表示にするための overflow:auto; はここでは機能しません

<table width="200">

<tr>

<td width="25%" >abcdefghigklmnopqrstuvwxyz1234567890</td>

<td width="75%" >abcdefghigklmnopqrstuvwxyz1234567890</ td>

</tr>

< + この現象が発生する可能性は非常に低いですが、ネチズンのいたずらも排除できません。