CSS を使用して英単語を強制的に改行するコード

この記事では、CSS を使用して英語の単語を強制的に改行するコードを主に紹介します。これは、必要な友達に参照してもらえるように共有します。企業英語版の Web サイト: 英語の単語のスペースが不足しているため、単語全体が折り返され、単語間の隙間が大きくなりすぎます。これはレイアウトの美しさに直接影響します。この問題の解決方法に興味のある方は注意してください。この記事が役立つかもしれません

コーポレート Web サイトの英語版を作成していたとき、英語の単語のスペースが十分に残っておらず、単語全体が折り返してしまい、単語間の隙間が大きくなりすぎてしまいました。以下に示すように

:

CSS 属性を使用します

word-break:break-all;

効果は次のとおりです:

強制的に改行しない

{ 
white-space:nowrap; 
}

自動的に折り返す

{ word-wrap: break-word; word-break: normal; }

英単語の強制改行

{ 
word-break:break-all; 
}

改行しないように CSS 設定:

overflow: hidden Hide white-space:normal デフォルト
pre 改行とその他の空白文字は保護されます
nowrap すべてのテキストを強制的にテキストの終わりまたは br オブジェクトに遭遇するまで、同じ行に表示されます

強制改行を設定します:
word-break: normal; アジア言語と非アジア言語のテキスト規則に従って、単語内での改行は許可されます
break-all: この動作は、アジア言語の通常の動作と一致しています。非アジア言語のテキスト行の任意の単語内での区切りも許可されます。この値は、アジア以外のテキストを含むアジアのテキストに適しています
keep-all : すべての非アジア言語の通常と同じです。中国語、韓国語、日本語の場合、単語の区切りは許可されません。少量のアジア語のテキストが含まれる非アジア語のテキストに非常に適したソリューションです。

英語では改行されません
この問題を解決するには、CSS に word-break: Break-all; を追加します。この問題は FF でテストした場合にのみ発生します。FF はスクロール バーを単独で追加できますが、効果には影響しません。スキンを実行するときは、本文に word-break: Break-all; を忘れずに追加することをお勧めします。これにより、IE のフレームがブロックされる問題を解決できます。 以下は word-break の指示を引用しています。word-break は IE5+ の独自の属性であることに注意してください。
構文:

word-break : normal | break-all | keep-all

パラメータ:
normal:アジア言語と非アジア言語のテキスト ルールでは、単語内の改行が許可されます

break-all: この動作は、アジア言語の通常の動作と同じです。非アジア言語のテキスト行の任意の単語内での区切りも許可されます。この値は、アジア以外のテキストを含むアジアのテキストに適しています

keep-all : すべての非アジア言語の通常と同じです。中国語、韓国語、日本語の場合、単語の区切りは許可されません。少量のアジア語テキストを含む非アジア語テキストに適しています。
説明:
オブジェクト内のテキストの単語内折り返し動作を設定または取得します。特に複数の言語が登場する場合。
中国語の場合は、ブレークオールを使用する必要があります。
対応するスクリプト機能はwordBreakです。私が書いた他の本もご覧ください。
例:

{word-break : break-all; }

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

CSSリストランキングの特殊効果を実装する方法
CSS3のクリックボタンを使用して、背景のグラデーションアニメーションの効果を実現します

以上がCSS を使用して英単語を強制的に改行するコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。