ホームページ > ウェブフロントエンド > CSSチュートリアル > word-break:break-allを使用して改行を強制するにはどうすればよいですか?

word-break:break-allを使用して改行を強制するにはどうすればよいですか?

yulia
リリース: 2018-09-13 16:22:09
オリジナル
3379 人が閲覧しました

通常の状況では、要素にはデフォルトの white-space:normal が設定されています (自動行折り返し、追記: 行折り返しなしは white-space:nowrap) 入力されたテキストが定義された幅を超えると、自動的に折り返しられます。ただし、データを入力すると、スペースのない文字、文字、数字の束になります (通常のデータは存在しないはずですが、一部のテスターはこの方法でコンテナの幅を超えると、コンテナは行なしで展開されます)。休憩します。

解決策 (テストブラウザとして IE、chrome、FF を使用):

{  word-break:break-all;
   word-wrap:break-word;
}
ログイン後にコピー

2 つの方法の違いは次のとおりです:

1、word-break:break-all たとえば、div 幅が 200px の場合行末に長い英単語(congratulation など)がある場合、内容は自動的に 200px に折り返され、単語が切り捨てられ、最後が conra(congratulation の前の部分)になります。の行の次の行がバックエンド部分の tulation (conguatulation) になります。

2、word-wrap:break-word この例は上記と同じですが、行末が表示できるほど広くない場合、単語全体を全体として祝福するという点が異なります。単語全体を入力すると、単語が切り捨てられることなく、単語全体が自動的に次の行に配置されます。

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

word-wrap:break-word サポートされているバージョン: IE5.5 以降 コンテンツは境界内で折り返されます。必要に応じて、単語の区切りも発生します。テーブルは自動的に折り返され、伸びを防ぎます。

構文:word-break:normal | keep-all
パラメータ:normal:アジア言語と非アジア言語のテキストルールに従って、単語内での改行は許可されます
break-all:この動作はアジア言語の通常と同じ同じ。非アジア言語のテキスト行の任意の単語内での区切りも許可されます。この値は、アジア以外のテキストを含むアジアのテキストに適しています
keep-all : すべての非アジア言語の通常と同じです。中国語、韓国語、日本語の場合、単語の区切りは許可されません。少量のアジア語テキストを含む非アジア語テキストに適しています

構文: word-wrap:normal |break-word
パラメータ:normal:指定されたコンテナ境界に対するコンテンツのプッシュを許可します
break-word:コンテンツは境界内で折り返す。必要に応じて、ワードブレークも行われます。 説明: 現在の行が指定されたコンテナーの境界を超えたときに行を区切るかどうかを設定または取得します。

提案: 3C でワードブレイクを検出すると問題が発生し、Baidu スナップショットでも問題が発生します。この属性は OPERA FIREFOX ブラウザではサポートされていないため、代わりにwhite-space:normal; を使用できます。改行は FireFox と IE の両方で正しく行うことができます。また、単語間のスペースを使用して単語を置き換えることはできません。そうしないと改行が正しく行われないことに注意してください。

以上がword-break:break-allを使用して改行を強制するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート