CSS制御強制改行ソリューション

1. 問題が見つかりました
通常の状況では、要素にはデフォルトのwhite-space:normal（自動行折り返し、行折り返しでない場合はwhite-space:nowrap）が設定されており、入力されたテキストが定義された幅を超えると、自動的に折り返しられます。ただし、入力されたテキスト データがスペースを含まない文字、文字、数字の束である場合 (通常のデータは存在しないはずですが、一部のテスターはこのようにします)、コンテナの幅を超えるとコンテナが拡張されます。改行なしで。

2. 解決策
divを例に挙げます
div{
word-break:break-all;
word-wrap:break-word;
}

3. truncationの理解
word - Break:break-all
div の幅は 200px で、その内容は行末に長い英語の単語 congratulation がある場合、その単語は切り詰められ、行末で conra になります。次の行は tulation になります。

word-wrap:break-word

この例は上記と同じですが、行末が単語全体を表示するのに十分な幅がない場合、単語全体を全体として祝福するという点が異なります。単語を切り詰めることなく、単語全体が自動的に次の行に配置されます。

② サポートされているバージョン

word-break;break-all サポートされているバージョン: IE5 以降 この動作は、アジア言語の通常の動作と同じです。非アジア言語のテキスト行の任意の単語内での区切りも許可されます。この値は、アジア以外のテキストを含むアジアのテキストに適しています。
word-wrap:break-word サポートされているバージョン: IE5.5 以降 コンテンツは境界内で折り返されます。必要に応じて、単語の区切りも発生します。テーブルは自動的に折り返され、伸びを防ぎます。

③ 構文

word-break : 通常 | keep-all
normal : アジア言語と非アジア言語のテキスト規則に従って単語内の改行を許可します
break-all : この動作は次と同じです。アジア言語では通常。非アジア言語のテキスト行の任意の単語内での区切りも許可されます。この値は、アジア以外のテキストを含むアジアのテキストに適しています
keep-all : すべての非アジア言語の通常と同じです。中国語、韓国語、日本語の場合、単語の区切りは許可されません。少量のアジア語テキストを含む非アジア語テキストに適しています

word-wrap :normal | Break-word

normal : コンテンツが指定されたコンテナ境界を破ることを許可します
break-word : コンテンツは境界内で折り返されます。必要に応じて、ワードブレークも行われます。 説明: 現在の行が指定されたコンテナーの境界を超えたときに行を区切るかどうかを設定または取得します。

4. 注意事項
① 改行制御の1つが無効な場合は、2つ記述してください。たとえば、 td{ word-break:break-all;word-wrap:break-word}
② word-break は 3C によって検出されると問題を示し、Baidu スナップショットで問題が発生します。この属性は OPERA FIREFOX ではサポートされていません。ブラウザでは、break 属性をwhite-space:normal に置き換えることができるため、FireFox と IE では改行が正しく行われます。また、単語間のスペースを代わりに使用できないことにも注意してください。そうしないと改行が行われません。正しくありなさい。

以上がCSS制御強制改行ソリューションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。