<body style="direction: ltr;" leftmargin="2" topmargin="0" oncontextmenu="return false" ondragstart="return false" onselectstart="return false" onselect="document.selection.empty()" oncopy ="document.selection.empty()" onbeforecopy="return false" onmouseup="document.selection.empty()" marginheight="0" marginwidth="0">右クリックのコピー プログラムを削除する この記事では、CSS を使用して英語のテキストを自動的に折り返す方法を紹介します。連続した英語や数字を使用すると、コンテナーのサイズに応じて自動的に折り返せないことは誰もが知っています。CSS を使用してそれらを自動的に折り返す方法を紹介します。 英語や数字が連続するとコンテナが拡大し、コンテナのサイズに応じて自動的にラップできないことは誰もが知っています。CSS がこれらを自動的にラップする方法を説明します。 Div とテーブル、およびブラウザーが異なると、CSS の自動行折り返しを実装する方法が若干異なります。以下に説明します。 ディビジョン用 1.（IE ブラウザ）white-space:normal; ここでは前者は標準に従います。 div css xhtml xml ソース コードの例 ソース コードの例 [www.52css.com] または： #wrap{ワードブレイク:ブレイクオール;幅:200ピクセル;} 効果: 自動行折り返しを実現できます。 2. （Firefox ブラウザ）white-space:normal; word-break:break-all;overflow:hidden; FF にはスクロール バーを隠すか追加することしかできませんが、もちろんスクロール バーはありません。効果がさらに良くなりました！ div css xhtml xml ソース コードの例 ソース コードの例 [www.52css.com] または： #wrap{ワードブレイク:ブレイクオール;幅:200ピクセル; 効果: コンテナは正常で、コンテンツは非表示になります。 1. (IE ブラウザ) table-layout:fixed スタイルを使用します。 div css xhtml xml ソース コードの例 ソース コードの例 [www.52css.com] 効果: 行を自動的に折り返す 2.（IEブラウザ）の利用スタイル： div css xhtml xml ソース コードの例 ソース コードの例 [www.52css.com] 効果: 行を自動的に折り返す 3. (IE ブラウザ) パーセンテージを使用して TD サイズを固定する場合は、スタイル table-layout:fixed および nowrap を使用します。 div css xhtml xml ソース コードの例 ソース コードの例 [www.52css.com] 効果: 両方の TD が通常どおり自動的にラップされます。 4. (Firefox ブラウザ) パーセンテージを使用して td サイズを固定する場合は、スタイル table-layout:fixed および nowrap を使用し、div を使用します。 div css xhtml xml ソース コードの例 ソース コードの例 [www.52css.com] ここでのセル幅はパーセンテージとして定義する必要があります。通常どおり表示されますが、折り返すことはできません。
#wrap{空白:通常の幅:200px;
<div id="wrap">ddd111111111111111111111111111111</div>
#wrap{空白:通常の幅:200px;}
<div id="wrap">ddd111111111111111111111111111111111111111</div>
http://font.knowsky.com/
テーブル用
<スタイル>
.tb{テーブルレイアウト:固定}
</スタイル>
<テーブルクラス="tbl" width="80">
<tr><td>
abcdefghigklmnopqrstuvwxyz 1234567890
</td></tr>
</テーブル>
<スタイル>
.tb {テーブルレイアウト:固定}
</スタイル>
<table class="tb" width="80"><tr><td nowrap>
abcdefghigklmnopqrstuvwxyz 1234567890
</td></tr>
</テーブル>
<スタイル>
.tb{テーブルレイアウト:固定}
</スタイル>
<テーブルクラス="tb" width=80>
<tr>
<td width=25% ナラップ>
abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td>
</tr>
</テーブル>
<スタイル>
.tb {テーブルレイアウト:固定}
.td {オーバーフロー:非表示;}
</スタイル>
<テーブルクラス=tb幅=80>
<tr><td width=25% class=td nowrap>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
<td class=td nowrap><div>abcdefghigklmnopqrstuvwxyz 1234567890</div></td>
</tr>
</テーブル>