通常の状況では、要素にはデフォルトのwhite-space:normal (自動行折り返し、PS: 行折り返しなしはwhite-space:nowrap) が設定されていますが、入力されたテキストが定義された幅を超えると、自動的に折り返しられます。入力されたデータがスペースのない文字、文字、数字の集まりである場合 (通常のデータにはスペースがないはずですが、一部のテスターはこのようにします) コンテナーの幅を超えると、コンテナーは行なしで展開されます。休憩します。
解決策(テストブラウザとしてIE、chrome、FFを使用):
Java code
以下は、2 つのメソッドの違いの説明です:
1、 word-break:break-all たとえば、div の幅が 200 ピクセルの場合、行末に長い英語の単語 (congratulation など) がある場合、その内容は自動的に 200 ピクセルで折り返されます。行末をコンラ(おめでとう)とすると前端部分)、次の行が後端部分のトゥレーション(conguatulation)になります。
2. word-wrap:break-word の例は上記と同じですが、行末が単語全体を表示するのに十分な幅がない場合、単語全体を祝福する点が異なります。単語を切り詰めることなく、単語全体が自動的に次の行に配置されます。
3、word-break;break-all サポートされているバージョン: IE5 以降 この動作は、アジア言語の通常の動作と同じです。非アジア言語のテキスト行の任意の単語内での区切りも許可されます。この値は、非アジアのテキストを含むアジアのテキストに適しています。
word-wrap:break-word 対応バージョン:IE5.5以降 コンテンツは境界内で折り返されます。必要に応じて、単語の区切りも発生します。テーブルは自動的に折り返され、伸びを防ぎます。
構文:word-break:normal | Break-all | keep-all
パラメータ:normal:アジア言語と非アジア言語のテキストルールに従って単語内の改行を許可します
break-all:この動作は同じですアジア言語の場合は通常どおりです。非アジア言語のテキスト行の任意の単語内での区切りも許可されます。この値は、アジア以外のテキストを含むアジアのテキストに適しています
keep-all : すべての非アジア言語の通常と同じです。中国語、韓国語、日本語の場合、単語の区切りは許可されません。少量のアジア語テキストを含む非アジア語テキストに適しています
構文: word-wrap:normal |break-word
パラメータ:normal:コンテンツが指定されたコンテナ境界に押し込まれることを許可します
break-word:コンテンツはその中で折り返されます境界線。必要に応じて、ワードブレークも行われます。 説明: 現在の行が指定されたコンテナーの境界を超えたときに行を区切るかどうかを設定または取得します。
提案: 3C でワードブレイクを検出すると問題が発生し、Baidu スナップショットでも問題が発生します。この属性は OPERA FIREFOX ブラウザではサポートされていないため、代わりにwhite-space:normal; を使用できます。 FireFox で使用できます。改行は IE では正しく行われます。単語間のスペースを使用して置換することはできないことに注意してください。そうしないと改行が正しくなりません。