コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > 本文

css 強制改行 IE、Firefox 改行

高洛峰
リリース： 2016-11-24 11:24:02
オリジナル
1352 人が閲覧しました

div や p などのブロックレベルの要素の場合、

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

html

通常のテキストの折り返し (アジア言語のテキストと非アジア言語のテキスト) 要素は、定義されている場合、デフォルトのwhite-space:normal になります

css

#wrap- 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;}

abcdefghijklmnabcdefghijklmnabcdefghijklmn11111111 1

効果: 改行を実現できます

2. (Firefox ブラウザ) 連続した英語文字とアラビア数字が壊れています。Firefox のすべてのバージョンではこの問題は解決できません。私たちだけで解決できます。境界を越える文字を非表示にするか、コンテナにスクロール バーを追加します

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

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

テーブルの場合

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

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890

< ;/td>

4. (Firefox ブラウザ) table-layout:fixed; を使用して、テーブル、内部 TD、行を折り返すために word-break:break-all; または word-wrap:break-word; を使用します。ここでは overflow:auto は機能しません。

abcdefghigklmnopqrstuvwxyz1234567890 abcdefghigklmnopqrstuvwxyz1234567890

効果: コンテンツ以外を非表示にする

5. (Firefox ブラウザ) td,th に埋め込み、div、p などを設定し、上記の方法を使用して Firefox を処理しますコードボックスを実行します。最後に、これが起こる可能性は非常に低いです。

関連ラベル：
css
ソース：php.cn
前の記事：CSS コントロールのテキストの前の小さなアイコン 次の記事：[RAC] cssfatal がないためノード 1 を起動できません
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1335
ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...
から 2024-04-06 21:58:04
0
1
800
Javafx でインライン CSS スタイルを動的に変更する アプリケーションが最大化されているときにペインの背景画像を変更しようとしています。私の背景はインライン CSS を使用して設定されています。スタイル用に 2 つの異なる変数と if...
から 2024-04-06 20:57:16
0
1
487
CSS でフローティング要素を水平ではなく垂直にスタックするにはどうすればよいですか? 片側にメインコンテンツ、もう一方に追加コンテンツがある 2 つの列を持つ Web ページを作成しようとしています。ただし、float プロパティを使用して追加の列を左に揃えているた...
から 2024-04-06 20:45:26
0
2
386
他の CSS コードに関係なく、フレックスボックス内のテキストを強制的に垂直方向の中央に配置する方法はありますか? 開発中の Web サイトで使用されている大規模な CSS コードの一部である次の CSS コードがあります。 }.card-u{margin:20px;padding:20px;w...
から 2024-04-06 20:41:51
0
1
518
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート