行折り返し・自動行折り返し・強制行折り返しを使わないCSSの実装方法_体験交流

強制的に改行しない

div{
white-space:nowrap;
}

自動的に折り返す

div{
word-wrap: Break- word ;
word-break: 通常;
}

英語の単語を強制的に改行します

div{
word-break:break-all;
}


CSS 設定は折り返されません:


オーバーフロー: 非表示 非表示
空白: 通常のデフォルト
改行前およびその他の空白文字は折り返されます。保護されるnowrap は、テキストの終わりまたは br オブジェクトに遭遇するまで、すべてのテキストを同じ行に強制的に表示します


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



英語は改行しません

ワードブレーク: Break-all; を追加しますCSS の問題解決。この問題は IE にのみ存在します。FF でテストすると、FF は単独でスクロール バーを追加できますが、効果には影響しません。

スキンを実行するときは、ワードブレーク: ブレークオールを忘れずに追加することをお勧めします。これは機能します 英語によって IE のフレームが引き伸ばされる問題を解決します

以下はワードブレークの手順を引用しています。ワードブレークは IE5 の独自の属性であることに注意してください

構文:

word-break : Normal | Break-all | keep-all

パラメータ:

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

説明:

オブジェクト内のテキストの単語内折り返し動作を設定または取得します。特に複数の言語が登場する場合。
中国語の場合は、ブレークオールを使用する必要があります。
対応するスクリプト機能は wordBreak です。私が書いた他の本もご覧ください。

例:

div {単語区切り : すべて区切り; }