CSS を使用して英単語の自動行折り返しの問題を解決する方法

テーブル/レイヤーの破裂や単語の破損を防ぎます。

英単語の自動行折り返しの問題は多くの人を悩ませていると言えます。単語を長く書くと表が壊れますが、無視すると英単語が分割されてしまいます。

フォームの破裂を防ぐ

この問題は多くの人が指摘しており、後に初期バージョンで解決しましたが、英単語が分割されて改行されてしまうため、新しいテンプレートを作成するときに CSS コードを追加しませんでした。これを制御するために。今日試してみたところ、解決策は非常に簡単であることがわかりました。

インターネット上のほとんどの記事によると、次のように追加するだけです。
コード
……

テーブル {

テーブルレイアウト:固定;ワードブレーク:ブレークオール;ワードラップ:ブレークワード;}

div{ワードブレイク:ブレイクオール;ワードラップ:ブレイクワード;}

これにより、壊れたテーブルとレイヤーの問題が解決されます。これが最初にやったことです。ただし、このようなコードでは英語の単語がすべて切り捨てられるという問題が発生します。これは英語の書き方の習慣に合っておらず、読みにくくなります。

後で、上記のコードを書き直すことで、テーブル/レイヤーの破損と単語の破損を防ぐことができることがわかりました。
次のように：
コード

テーブル {
テーブルレイアウト: 固定;
ワードラップ:ブレイクワード;
}
ディビジョン {
ワードラップ:ブレイクワード;
}

これは私が現在使用しているコードでもあります。
-------------------------------------------------- ---

Rainer Su 氏による CSS2 中国語マニュアルによると

ワードブレーク バージョン: IE5+ 独自プロパティの継承: はい 構文:
ワードブレーク: 通常のブレークオール |
価値：
通常: デフォルト値。単語間の改行を許可する
Break-all : この動作は、アジア言語の通常の動作と同じです。非アジア言語のテキスト行の任意の単語内での区切りも許可されます。この値は、アジア以外のテキストを含むアジアのテキストに適しています。
keep-all : すべての非アジア言語の通常と同じです。中国語、韓国語、日本語の場合、単語の区切りは許可されません。少量のアジアのテキストを含む非アジアのテキストに適しています

例証します:
オブジェクト内のテキストの単語内折り返し動作を設定または取得します。特に複数の言語が登場する場合。
中国語の場合は、ブレークオールを使用する必要があります。
このプロパティは、currentStyle オブジェクトに対して読み取り専用です。他のオブジェクトからの読み取りと書き込みが可能です。
対応するスクリプト機能は wordBreak です。
例：
div {単語区切り : すべて区切り }
適用対象:
IE5.0以上

ワードラップ バージョン: IE5.5+ 独自プロパティの継承: あり 構文:
ワードラップ : 通常のブレークワード |
価値：
通常: デフォルト値。コンテンツが指定されたコンテナの境界を越えて拡張できるようにする
Break-word : コンテンツは境界内で分割されます。必要に応じて、単語の区切りも発生します

例証します:
現在の行が指定されたコンテナの境界を超えた場合に行を分割するかどうかを設定または取得します。
このプロパティは、ブロック オブジェクトなどのレイアウト オブジェクトに対してのみ機能します。この属性をインライン要素に使用するには、最初にオブジェクトの高さ属性または幅属性を設定するか、位置属性を絶対に設定するか、表示属性をブロックに設定する必要があります。
このプロパティは、currentStyle オブジェクトに対して読み取り専用です。他のオブジェクトからの読み取りと書き込みが可能です。
対応するスクリプト機能は wordWrap です。
例：
div { ワードラップ: ワードブレーク: ブレークオール }

これに注意してください
Break-word : コンテンツは境界内で分割されます。必要に応じて、単語の区切りも発生します

したがって、デフォルトでは単語は改行されません。ただし、歴史上最も怖い英単語 12 語の間違ったバージョンなど、非常に長い単語がある場合は改行されます。フォームの崩れを防ぎます。
ただし、これは w3c によって css2 標準として採用されていないため、Mozilla はこの属性をサポートしていません。誰かが英語の単語を書いても、Firefox は単語を分割して改行することはありません。長い単語、Mozilla Firefox は改行されず、改行されます。
CSS3 がこの属性を受け入れるかどうかはわかりませんが、正直、BT すぎる単語の方が優れています...