ホームページ  >  記事  >  ウェブフロントエンド  >  cssは強制的な非行折り返し/自動行折り返し/強制行折り返しを実装します。

cssは強制的な非行折り返し/自動行折り返し/強制行折り返しを実装します。

高洛峰
高洛峰オリジナル
2016-11-24 11:30:261418ブラウズ

行折り返しを強制しない div{
white-space:nowrap;
}

自動行折り返し

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

英単語を強制する

div{
word-break:break-all;
}


CSS 設定は壊れません:


overflow: hidden 隠す
white-space: 通常 デフォルト
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 | all | keep-all

パラメータ:

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

説明:

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

例:

div {word-break : Break-all; }
IE6 と互換性を持たせたい場合: div {WORD-WRAP:break-word;word-break : Break-all }

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。