この記事では、IE および FF と互換性のある改行の推奨 CSS スタイルをリストし、ワードラップとワードブレークの違いについて詳しく説明します。
IE、FF対応の改行CSS推奨スタイル
最良の方法は
ワードラップ:ブレイクワード; オーバーフロー:非表示;
の代わりに
ワードラップ:単語の区切り:すべての区切り;
どちらでもない
ワードラップ:ブレイクワード:自動;
IEでは問題ありませんが、FFでは英語の長い文字列は内容を超えてブロックされてしまいます。
ワードラップとワードブレークの違い
引用した内容は以下の通りです。
ワードラップ:
通常のデフォルト。コンテンツはコンテナの境界を超えています。
Break-word コンテンツは次の行に折り返され、必要に応じてワードブレークがトリガーされます。 単語区切り:
通常のデフォルト。単語内での改行を許可します。アジア言語のテキストに対してのみ機能するようです。
Break-all アジア言語のテキストでは通常と同じように動作しますが、非アジア言語のテキストでは任意に改行できます。この値は、非アジア言語のテキストの一部を含むアジア言語のテキストに適しています。
keep-all 中国語、日本語、韓国語の単語分割を許可しません。アジア以外のすべての言語と同様に機能します。この値は、少量の中国語、日本語、または韓国語を含むテキストに最適化されます。 |
要約は次のとおりです。
wordwrap は行の折り返しを制御します。
ブレークワードを使用すると強制的に改行されます。中国語も問題ありませんし、英語の文章も問題ありません。しかし、英語の長い文字列の場合は機能しません。
Break-Word は、単語を区切るかどうかを制御します。
「Normal」がデフォルトの状態で、英単語は分割されません。
Break-all はブレイクワードです。単語が境界に達すると、次の文字が自動的に次の行に進みます。主に英語の長い文字列の問題を解決します。
keep-all は中国語、日本語、韓国語の連続する単語を指します。つまり、ワードラップなしで今回のみを使用すると、中国語はラップされません。 （英語の文章は普通です。）
つまり、以下の下にあります:
word-wrap:break-word; を使用すると、すべて正常に機能します。
次へ:
この2つを使わなければ中国語は問題ありません。英語の文章も問題ありません。ただし、英語の長い文字列は問題を引き起こす可能性があります。
英語の長い文字列を解決するには、通常 word-wrap:break-word;word-break:break-all; が使用されます。ただし、この方法だと通常の英語の文章では単語が切れてしまいます（ieも同様です）。
現在の主な問題は、英語と英語の単語の長い文字列が切断されていることです。実際、英語の長い文字列は、比較的長い単語にすぎません。
つまり、英単語は切り離すべきなのでしょうか？問題は明らかであり、切断すべきではないことは明らかです。
英語の長い文字列の場合は悪意があるので、もちろん心配する必要はありません。ただし、容器の拡大を防ぐ方法も考えなければなりません。
ie の下で overflow:auto; を使用すると、長い文字列は自動的に折り返されます。 ff、長い文字列はカバーされます。
つまり、最善の方法は word-wrap:break-word;word-break:break-all; ではなく word-wrap:break-word;overflow:hidden; です。
word-wrap:break-word;overflow:auto; IE では問題ありません。 ff では、長い文字列は部分的に隠れます。
なお、テストコードは以下の通りです。
引用した内容は以下の通りです。
1.htm============================================== = ==================== <スタイル>
.c1{ 幅:300px; ボーダー:1px 赤}
.c2{ 幅:300px;ワードラップ:ブレイクワード; ボーダー:1px 黄色}
.c3{ 幅:300px;ワードラップ:ブレークワード;ワードブレーク:ブレークオール; ボーダー:1px ソリッドグリーン}
.c4{幅:300ピクセル;ワードラップ:ブレイクワード;ワードブレイク:キープオール;ボーダー:1ピクセル青一色}
.c5{ 幅: 300px;ワードブレイク: ブレークオール; ボーダー: 1 ピクセル黒}
.c6{ 幅: 300 ピクセル; ワードブレイク: キープオール; ボーダー: 1 ピクセルの赤一色}
.c7{ 幅:300px;ワードラップ:ブレイクワード;オーバーフロー:自動; 黄色一色}
</スタイル> .c1{ 幅:300px; ボーダー:1px 赤}
<div class="c1">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div クラス=c1>
これはすべて英語です。これはすべて英語です。
</div>
<div クラス=c1>
すべて中国語です。すべて中国語です。すべて中国語です。
</div>
<div クラス=c1>
中国語と英語のミックスアレンジ。中国語と英語の混合配列。中国語と英語。
</div> <br>
.c2{ 幅:300px;ワードラップ:ブレイクワード; ボーダー:1px 黄色}
<div class="c2">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div クラス=c2>
これはすべて英語です。これはすべて英語です。
</div>
<div クラス=c2>
すべて中国語です。すべて中国語です。すべて中国語です。
</div>
<div クラス=c2>
中国語と英語のミックスアレンジ。中国語と英語の混合配列。中国語と英語。
</div> <br>
.c3{ 幅:300px;ワードラップ:ブレークワード;ワードブレーク:ブレークオール; ボーダー:1px ソリッドグリーン}
<div class="c3">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div クラス=c3>
これはすべて英語です。これはすべて英語です。
</div>
<div クラス=c3>
すべて中国語です。すべて中国語です。すべて中国語です。
</div>
<div クラス=c3>
中国語と英語のミックスアレンジ。中国語と英語の混合配列。中国語と英語。
</div> <br>
.c4{幅:300ピクセル;ワードラップ:ブレイクワード;ワードブレイク:キープオール;ボーダー:1ピクセル青一色}
<div class="c4">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div クラス=c4>
これはすべて英語です。これはすべて英語です。
</div>
<div クラス=c4>
すべて中国語です。すべて中国語です。すべて中国語です。
</div>
<div クラス=c4>
中国語と英語のミックスアレンジ。中国語と英語の混合配列。中国語と英語。
</div> <br>
.c5{ 幅: 300px;ワードブレイク: ブレークオール; ボーダー: 1 ピクセル黒}
<div class="c5">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div クラス=c5>
これはすべて英語です。これはすべて英語です。
</div>
<div クラス=c5>
すべて中国語です。すべて中国語です。すべて中国語です。
</div>
<div クラス=c5>
中国語と英語のミックスアレンジ。中国語と英語の混合配列。中国語と英語。
</div> <br>
.c6{ 幅: 300 ピクセル; ワードブレイク: キープオール; ボーダー: 1 ピクセルの赤一色}
<div class="c6">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div クラス=c6>
これはすべて英語です。これはすべて英語です。
</div>
<div クラス=c6>
すべて中国語です。すべて中国語です。すべて中国語です。
</div>
<div クラス=c6>
中国語と英語のミックスアレンジ。中国語と英語の混合配列。中国語と英語。
</div> <br>
.c7{ 幅: 300 ピクセル;ワードラップ: ブレークワード; オーバーフロー: 自動; 1 ピクセル黄色}
<div class="c7">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c7>
これはすべて英語です。これはすべて英語です。
</div>
<div class=c7>
すべて中国語です。すべて中国語です。すべて中国語です。
</div>
<div class=c7>
中国語と英語のミックスアレンジ。中国語と英語の混合配列。中国語と英語。
</div> |
