CSS Webページ作成時に自動行折り返しを実現するためのヒント
著者：Eve Cole
更新時間：2025-01-15 17:00:16
CSS Web ページ作成時に自動行折り返しを実現するためのヒント 2009 年 3 月 6 日金曜日 10:47 連続した英語や数字を使用するとコンテナが拡大し、コンテナのサイズに応じて自動的に折り返しできないことは誰でも知っています。 CSSメソッドを使って！
div 1 の場合（IE ブラウザ）white-space:normal; word-break:break-all; の場合、前者は標準に従います。 #wrap{空白:通常の幅:200px;
または
#wrap{word-break:break-all;width:200px;}例:<div id="wrap">ddd11111111111111111111111111111111</div>効果: 行の折り返しを実現できます。 2. (Firefox ブラウザ)white-space:normal; word -break:break-all;overflow:hidden; 同様に、FF ではスクロール バーを非表示にするか追加することしかできません。 #wrap{空白:通常の幅:200px;}
または
#wrap{word-break:break-all;width:200px; overflow:auto; }eg.<div id="wrap">ddd1111111111111111111111111111</div> 結果: コンテナは正常で、テーブル 1 のコンテンツは非表示になります。 (IE ブラウザ) スタイル table-layout:fixed を使用します。
例:<スタイル>
.tb{テーブルレイアウト:固定}
</style><table class="tbl" width="80">
<tr>
<td>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>効果: 行を折り返すことができます 2. (IE ブラウザ) スタイル table-layout:fixed および nowrapeg.<style> を使用します。
.tb {テーブルレイアウト:固定}
</style><table class="tb" width="80">
<tr>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>効果: 3 をラップできます。(IE ブラウザ) パーセンテージを使用して TD サイズを固定する場合は、スタイル table-layout:fixed および nowrap<style> を使用しますhttp://www.knowsky.com/
.tb{テーブルレイアウト:固定}
</style><table class="tb" width=80>
<tr>
<td width=25% nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table> 効果: 両方の tds が通常どおりラップします。 3. (Firefox ブラウザ) パーセンテージを使用して td サイズを固定する場合は、スタイル table-layout:fixed および nowrap を使用し、diveg.<style> を使用します。
.tb {テーブルレイアウト:固定}
.td {オーバーフロー:非表示;}
</style><テーブルクラス=tb width=80>
<tr>
<td width=25% class=td nowrap>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
<td class=td nowrap>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
</tr>
</table> ここでのセル幅はパーセンテージで定義する必要があります。その結果、通常の表示になりますが、行の折り返しは行われません (注: コンテナの内容を FF で折り返す良い方法はありません。オーバーフローを使用して余分な部分を非表示にすることしかできません。避けるべきコンテンツは全体的な効果に影響します）
