DivCSS レイアウトを行う場合、テキストを制御する必要があります。今日はそれを体系的に紹介します。 CSS には改行を制御する 4 つのプロパティがあります。
1.空白
HTML の PRE タグの効果とセルの noWrap 効果を実現できます。
文法：
ホワイトスペース : 通常のプレナラップ
価値：
通常: デフォルト値。デフォルトの処理方法。テキストは自動的に改行を処理します。コンテナの境界に達すると、コンテンツは次の行に進みます。
pre: 改行およびその他の空白文字は保護されます。この値には、標準準拠モードのサポートとして宣言された IE6+ または !DOCTYPE が必要です。 !DOCTYPE 宣言で標準準拠モードが指定されていない場合、この属性は使用できますが、効果はありません。結果は正常と同等です。 「プレオブジェクト」を参照
nowrap: テキストの終わりまたは br オブジェクトに到達するまで、すべてのテキストを強制的に同じ行に表示します。 noWrap 属性を参照
例証します:
オブジェクト内のスペース文字の処理方法を設定または取得します。
改行、スペース、TAB などの空白文字は、HTML ドキュメントではデフォルトで無視されます。このプロパティが Normal または Nowrap に設定されている場合、非ラップスペース名前付きエンティティを使用してスペースを追加し、br 要素を使用して改行を追加できます。このプロパティは、IE で表示されるコンテンツと同じように、ドキュメント オブジェクト モデル (DOM) を使用して操作するコンテンツに対しても影響します。
このプロパティはブロック オブジェクトに対して機能します。
関連スタイル:
テキストオーバーフロー
これを空白と組み合わせると、文字列の長さを決定するプログラムを作成する必要がなくなります。ここをクリックして例を表示します。
文法：
text-overflow : 省略記号をクリップ
価値：
クリップ: デフォルト値。省略マーカー (…) は表示されず、単純に切り取られます。
ellipsis: オブジェクト内のテキストがオーバーフローした場合に省略記号 (…) を表示します。
例証します:
オブジェクト内のテキストのオーバーフローをマークするために省略記号 (...) を使用するかどうかを設定または取得します。
このプロパティは、水平インライン方向の通常の欧文テキストのオーバーフローにのみ影響します。インライン オーバーフローは、行内のテキストが折り返されずに使用可能な幅を超える場合に発生します。
オーバーフローを強制的に発生させて省略記号値を適用するには、作成者はオブジェクトの空白プロパティを nowrap に設定する必要があります。
改行の機会がない場合 (たとえば、オブジェクト コンテナの幅が狭く、適切な改行のない長いテキストがある場合)、nowrap を適用しないとオーバーフローする可能性があります。
省略記号の値を適用するには、このプロパティを非表示領域のあるオブジェクトに設定する必要があります。最良のオプションは、オーバーフロー プロパティを非表示に設定することです。このプロパティは、オーバーフロー プロパティをスクロールまたは自動に設定する場合にも適用されます。ただし、スクロールバーは表示されます。
省略マークを選択することで隠し文字を選択することができます。選択が行われると、省略記号マークが非表示になり、テキストに置き換えられます。
この属性は、DHTML で省略マークアップを作成する効率的な方法を提供します。
2. 単語の区切り
行の折り返しを制御するために最も一般的に使用されるプロパティは、以下のワードラップと組み合わせて使用されることがよくあります。
文法：
ワードブレーク: 通常のブレークオール キープオール
価値：
通常: デフォルト値。単語間の改行を許可する
Break-all: この動作はアジア言語の通常の動作と同じです。非アジア言語のテキスト行の任意の単語内での区切りも許可されます。この値は、アジア以外のテキストを含むアジアのテキストに適しています。
keep-all: アジア以外のすべての言語に対して通常と同じです。中国語、韓国語、日本語の場合、単語の区切りは許可されません。少量のアジア語テキストを含む非アジア語テキストに適しています
例証します:
オブジェクト内のテキストのワードラップ動作を設定または取得します。特に複数の言語が登場する場合。
中国語の場合は、ブレークオールを使用する必要があります。 [カットページ]
3. ワードラップ
デザインした Web ページの幅が調整できない場合は、ブレークワードに設定する必要があります。そうしないと、ページが千鳥状になる可能性があります。
文法：
ワードラップ : 通常のブレークワード
価値：
通常: デフォルト値。コンテンツが指定されたコンテナの境界を越えて拡張できるようにする
Break-Word: コンテンツは境界内で分割されます。必要に応じて、単語の区切りも発生します
例証します:
現在の行が指定されたコンテナの境界を超えた場合に行を分割するかどうかを設定または取得します。
このプロパティは、ブロック オブジェクトなどのレイアウト オブジェクトに対してのみ機能します。この属性をインライン要素に使用するには、最初にオブジェクトの高さ属性または幅属性を設定するか、位置属性を絶対に設定するか、表示属性をブロックに設定する必要があります。
4. オーバーフロー、オーバーフロー-x、オーバーフロー-y
これは行の折り返しスタイルを厳密に制御するわけではありませんが、非表示に設定すると、たとえば、制限された幅内で 1 行のテキストのみを表示したい場合に、この行の長さを補うことができます。テキストの幅がこの幅を超えている場合は、空白とテキスト オーバーフローを組み合わせると、より良い結果が得られます。
文法：
オーバーフロー: 表示される自動非表示スクロール
価値：
表示: デフォルト値。コンテンツを切り取ったり、スクロールバーを追加したりしません。このデフォルト値が明示的に宣言されている場合、オブジェクトは、それを含むウィンドウまたはフレームの寸法にクリップされます。また、クリップ属性の設定は無効になります。
auto: 必要に応じて、オブジェクトのコンテンツが切り取られるか、スクロール バーが表示されます。
hidden: オブジェクト サイズを超えるコンテンツを表示しません。
スクロール: 常にスクロール バーを表示します
例証します:
オブジェクトのコンテンツが指定された高さと幅を超えた場合にそのコンテンツを管理する方法を取得または設定します。
textarea オブジェクトと body オブジェクトを除き、すべてのオブジェクトのデフォルト値が表示されます。デフォルト値は auto です。 textarea オブジェクトのこのプロパティ値を hidden に設定すると、スクロール バーが非表示になります。
テーブルの場合、table-layout 属性が fix に設定されている場合、td オブジェクトはデフォルト値の hidden で overflow 属性をサポートします。スクロールまたは自動に設定すると、td サイズを超えるコンテンツはカットされます。表示に設定すると、(方向プロパティの設定に応じて) 余分なテキストが右側または左側のセルにオーバーフローします。
このプロパティは、IE5 以降の MAC プラットフォームで使用できます。
IE6 以降では、!DOCTYPE 宣言を使用して標準準拠モードを指定するときに、この属性を HTML オブジェクトに適用できます。