CSS はテキストの折り返しとトリミングを制御します

今回は、CSS で制御されたテキストの行の折り返しと切り抜きについて説明します。CSS を使用してテキストの折り返しと切り抜きを制御する場合の注意事項について説明します。実際のケースを見てみましょう。

行の折り返しとトリミングに関するいくつかの CSS プロパティ

word-wrap: Normal | Break-Word

normal 通常の改行、長い単語や長い数字などのコンテンツはコンテナーを分割する可能性があります

break - Word は改行の基礎として単語を使用します。必要に応じて、単語内での改行が許可されます

word-break:normal | keep-all

normal長い単語や長い数字など

break-all は改行の基礎として文字を使用します

keep-all は中国語と英語の通常の場合と同じです

white-space:normal || | nowrap || pre-wrap ||

通常のデフォルト値を継承します

pre の空白はブラウザによって保持され、その動作は

 HTML のタグ
nowrap テキストは折り返されず、
 タグが見つかるまで同じ行に表示されます 
pre-wrap 空白シーケンスを保持しますが、行は通常どおり折り返されます (IE7 -サポートされていません) 
pre-line 空白シーケンスをマージしますが、改行は保持します (IE7 - サポートされていません) サポート)
inherit は、空白属性の値が親要素から継承される必要があることを規定します (IE では、サポートしていません)
アプリケーション: 

テキストオーバーフロー表示省略マーク (...): 
text-overflow
 : ellipsis; white-space: nowrap; 
 テキストの折り返し: 

/* 改行の基準として word を使用します*/ word-wrap: Break-word; word-break: 通常 ; /* 改行の基準として文字を使用します*/ 
word -break: Break-all; 



 テキストは強制的に改行されません: 

white-space: nowrap;  この記事のケースを読んだ後は、この方法を習得したと思います。 php 中国語 Web サイトの他の関連記事にも注目してください。 
推奨読書: 

 CSS3 を使用してマウスのフローティングと画像の拡大を実装する

 IE8 での nth-child() 互換性問題に対処する方法

 CSS が消えた場合に対処する方法境界線
以上がCSS はテキストの折り返しとトリミングを制御しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。