ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSで英単語を自動で折り返す方法の紹介
CSS は英語の単語の自動行折り返しを可能にします
Web ページを作成して CSS スタイルを記述する過程で、多くの初心者を悩ませる英語の行折り返しの問題に遭遇する可能性があります。今日はこの問題について詳しく説明します。 CSS を勉強したことのある友人なら、CSS の word-break を使用してテキストの区切りを直接調整できることを知っているはずです。ただし、英語の場合は、この属性だけでは十分ではありません。
私が個人的に知っている情報によると、英語が多すぎると長すぎるとフォームに影響を与えるだけでなく、フォームとpが壊れる可能性があります。 まず、フォームとpの解決策が異なります。フォームでこの問題を解決する方法を見てみましょう。
テーブル レイアウトを使用していて、テーブルの内容がほとんど英語であり、英語が壊れない場合は、次のコードを css
table {
table-layout: fix; に追加するだけです。 -break :break-all;
word-wrap:break-word;
}
p+css レイアウトを使用する場合、p のテキストが英語で壊れている場合は、次のコードを css
p{
word-break:break-all;
word-wrap:break-word;
}
CSS2 中国語マニュアルによる
word-break バージョン: IE5+ 独自プロパティの継承: あり
構文:
word-break:break-all | keep-all
値:
normal: デフォルト値、単語間の改行を許可します。
break-all: この動作はアジア言語の通常の動作と同じです。非アジア言語のテキスト行の任意の単語内での区切りも許可されます。この値は、アジア以外のテキストを含むアジアのテキストに適しています。
keep-all: すべての非アジア言語の通常と同じです。中国語、韓国語、日本語の場合、単語の区切りは許可されません。少量のアジア語テキストを含む非アジア語テキストに適しています
説明:
オブジェクト内のテキストの単語内折り返し動作を設定または取得します。特に複数の言語が登場する場合。
中国語の場合は、ブレークオールを使用する必要があります。
このプロパティは、currentStyle オブジェクトに対して読み取り専用です。他のオブジェクトについては、読み取りと書き込みが可能です。
対応するスクリプト機能はwordBreakです。
例:
p {word-break : Break-all; }
適用対象:
IE5.0+
word-wrap バージョン: IE5.5+ 独自のプロパティ 継承: あり
構文:
word-wrap:normal | -word
Value:
normal: デフォルト値。コンテンツが指定されたコンテナ境界を破ることを許可します
break-word: コンテンツは境界内で分割されます。必要に応じて、ワードブレークも発生します。
説明:
現在の行が指定されたコンテナの境界を超えたときにブレークするかどうかを設定または取得します。
このプロパティは、ブロック オブジェクトなどのレイアウトを持つオブジェクトでのみ機能します。インライン要素でこの属性を使用するには、最初にオブジェクトの高さ属性または幅属性を設定するか、位置属性を ABS に設定するか、表示属性を block に設定する必要があります。
このプロパティは、currentStyle オブジェクトに対して読み取り専用です。他のオブジェクトについては、読み取りと書き込みが可能です。
対応するスクリプト機能はwordWrapです。
例:
p { word-wrap:break-word; word-break:break-all; }
次の点に注意してください
break-word : コンテンツは境界内で折り返されます。必要に応じて、単語の区切りも発生します
したがって、デフォルトでは単語の区切りは分離されませんが、誰かが最後に間違ったバージョンの履歴を投稿したときなど、非常に長い単語がある場合は、単語の折り返しで十分です。最も恐ろしい 12 の英単語は行に分割することもできるため、表が傷つくのを防ぐことができます。
ただし、これは w3c によって css2 標準として採用されていないため、Mozilla はこの属性をサポートしていません。誰かが英語の単語を書いても、Firefox は単語を分割して改行することはありません。非常に長い単語、Mozilla Firefox そうすれば改行は常に改行されなくなります。
以上がCSSで英単語を自動で折り返す方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。