CSS を使用して純粋な英語の数字の自動行折り返しを実現する

以下は、純粋な英語の数値を自動的にラップする CSS コードの簡単な実装です。内容がとても良かったので、参考としてシェアさせていただきます。

幅が定義されたブロック要素が純粋な英語または純粋な数字で埋められている場合、コンテナーはIEおよびFFで拡大され、自動的に折り返されません

そして、数字または英語に中国語の文字が含まれている場合、中国語の行は折り返されます文字ですが、純粋な中国語の文字は自動的に行を折り返すことができます。この問題を解決するにはどうすればよいでしょうか?まずは 2 人の主人公であるワードラップとワードブレークについて理解しましょう

ワードラップは CSS の改行を制御するために使用されます

2 つの値:

(1) Normal
(2) ) Break-word (この値は強制的に改行するために使用されます。コンテンツは境界内で改行されます。中国語は問題ありません。英語の文章は問題ありません。ただし、英語の長い文字列の場合は機能しません。 .)

word-break は単語分割を制御するために使用されます

3 つの値:

(1)normal

(2)break-all(単語を分割することです。単語が境界に到達すると、次の文字が自動的に次の行に移動します。主に英語の長い文字列の問題を解決します)

(3)keep-all (中国語、日本語、韓国語の連続した単語、1 つの文を指します。古代の詩を配置するために使用できます~)

【解決策】

CSSに

word-wrap:break-word;
word-break:break-all;

を追加することができます。 以上がこの記事の全内容です。関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

関連する推奨事項:

CSS を使用してページコンテンツのアスペクト比を維持する方法

CSS3 ユニット vw および vh の使用について

以上がCSS を使用して純粋な英語の数字の自動行折り返しを実現するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。