<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 がこれらを自動的にラップする方法を説明します。 Div と table、およびさまざまなブラウザーでは、CSS の自動行折り返しを実装する方法が若干異なります。
div
1
の場合。前者 標準に従います:
div css xhtml xml ソース コードの例 ソース コードの例 [www.52css.com]
#wrap{white-space:normal; width:200px; }
または:
#wrap{word-break:break-all;width:200px;}
<div id="wrap">ddd11111111111111111111111111111</div>
効果: 自動行折り返しを実現できます。
2. (Firefox ブラウザ) White-space:normal;overflow:hidden;同じFF 非常に優れた実装方法です。スクロール バーを非表示にするか追加するだけです。もちろん、スクロール バーを追加しない方が効果的です。
div css xhtml xml ソース コードの例 ソース コードの例 [www.52css.com]
#wrap{white-space:normal; width:200px; overflow:auto;}
または:
#wrap{word-break:break-all;width:200px;
<div id="wrap">ddd11111111111111111111111111111111111111</div>
効果: コンテナは正常で、コンテンツは非表示になります。
http://font.knowsky.com/
表
1 の場合。(IE ブラウザ) スタイル table-layout:fixed:
div css xhtml xml を使用します。 ソース コードの例 ソース コードの例 [www.52css.com]
<スタイル>
.tb{テーブルレイアウト:固定}
</スタイル>
<テーブルクラス="tbl" width="80">
<tr><td>
abcdefghigklmnopqrstuvwxyz 1234567890
</td></tr>
</table>
効果: 自動行折り返し
2. (IE ブラウザ) 使用スタイル:
div css xhtml xml ソース コードの例 ソース コードの例 [www.52css.com]
<スタイル>
.tb {テーブルレイアウト:固定}
</スタイル>
<table class="tb" width="80"><tr><td nowrap>
abcdefghigklmnopqrstuvwxyz 1234567890
</td></tr>
</table>
効果: 自動行折り返し
3. (IE ブラウザ) パーセンテージを使用して td サイズを固定する場合は、スタイル table-layout:fixed および nowrap を使用します。
div css xhtml xml ソース コードの例 ソース コードの例 [www.52css.com] 】
<スタイル>
.tb{テーブルレイアウト:固定}
</スタイル>
<テーブルクラス="tb" width=80>
<tr>
<td width=25% ナラップ>
abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td>
</tr>
</table>
効果: 両方の tds が通常どおりに自動的にラップされます。
4. (Firefox ブラウザ) パーセントを使用して td サイズを固定する場合は、スタイル table-layout: fixed および nowrap を使用し、div:
div css xhtml xml を使用します。 サンプル ソース コード サンプル ソース コード[www.52css.com]
<スタイル>
.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>
</table>
ここでのセル幅はパーセントで定義する必要があります。その結果、通常の表示になりますが、行の折り返しは行われません。