word-break:break-all と word-wrap:break-word はどちらも、DIV などのコンテナーのコンテンツを自動的にラップできるようにします。
それらの違いは次のとおりです:
1, word-break:break-all たとえば、div の幅が 200 ピクセルの場合、行末に長い英単語がある場合、その内容は自動的に 200 ピクセルで折り返されます。 (congratulation など)、行末が conra (congratulation の前の部分) となり、次の行が tulation (conguatulation) の後ろの部分になるように単語が切り詰められます。
2. word-wrap:break-word の例は上記と同じですが、行末が単語全体を表示するのに十分な幅がない場合に、単語全体を祝福する点が異なります。単語が切り捨てられることなく、単語全体が自動的に次の行に配置されます。
3、word-break;break-all サポートされているバージョン: IE5 以降 この動作は、アジア言語の通常の動作と同じです。非アジア言語のテキスト行の任意の単語内での区切りも許可されます。この値は、アジア以外のテキストを含むアジアのテキストに適しています。 WORD-WRAP:break-word 対応バージョン:IE5.5以降 コンテンツは境界内で折り返されます。必要に応じて、単語の区切りも発生します。テーブルは自動的に折り返され、伸びを防ぎます。 word-break : ノーマル | ブレークオール | キープオール パラメータ: ノーマル : アジア言語および非アジア言語のテキスト規則に従って単語内の改行を許可します。 Break-all : この動作はアジア言語の場合と同じです。非アジア言語のテキスト行の任意の単語内での区切りも許可されます。この値は、アジア以外のテキストを含むアジアのテキストに適しています。 keep-all : すべての非アジア言語の通常と同じです。中国語、韓国語、日本語の場合、単語の区切りは許可されません。少量のアジア語テキストを含む非アジア語テキストに適しています。 構文: word-wrap:normal |break-word パラメータ:normal:コンテンツが指定されたコンテナ境界に押し込まれることを許可します。break-word:コンテンツは境界内で折り返されます。必要に応じて、ワードブレークも行われます。 説明: 現在の行が指定されたコンテナーの境界を超えたときに行を区切るかどうかを設定または取得します。
対応するスクリプト機能は wordWrap です。私が書いた他の本もご覧ください。 構文: table-layout: auto | fix パラメータ: auto: デフォルトの自動アルゴリズム。レイアウトは各セルの内容に基づきます。各セルが読み取られて計算されるまで、テーブルは表示されません。非常に遅い修正: レイアウト アルゴリズムを修正しました。このアルゴリズムでは、水平レイアウトは表の幅、表の境界線の幅、セル間隔、および列の幅のみに基づいており、表の内容とは関係ありません。または、テーブルのレイアウト アルゴリズムを取得します。対応するスクリプト属性は tableLayout です。
例:
.word_break {float:left;width:200px;margin:10px;padding:10px;font-size:16px;font-family:simsun;border:1px solid #242424;zoom:1;word-break:break-all;}