CSS を使用してテキストを処理する方法について説明します format_html/css_WEB-ITnose

前書き

テキストには多くの CSS コンテンツがありますが、Office Word を使用して記事を編集したことがある人なら、そのほとんどを簡単に理解できます。それでは、今日は最も複雑な部分であるテキスト形式についてお話しましょう。

改行、スペース、タブの処理: ホワイトスペース

ご存知のとおり、ブラウザは HTML の改行を無視するため、一般に改行には df250b2156c434f3390392d09b1c9563 を使用することをお勧めします。また、複数のスペース (スペース) とタブは 1 つのスペース (スペース) としてのみ扱われるため、複数のスペースが必要な場合は、スペースの物理文字 -   を使用する必要があります。

実際、上記の問題はすべて、CSS の空白を使用して簡単に解決できます。

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

上記の表に基づいて空白の各値の意味を紹介しましょう:

• 改行は改行の処理を表します、スペースとタブは複数のスペースとタブの処理を表します、テキストの折り返しはテキストを表しますテキストコンテンツはコンテナの幅を超えると自動的に折り返されます。

• 空白が通常（ブラウザのデフォルト値）、改行が無効（折りたたまれる）の場合、複数のスペースとタブは処理のために1つのスペースに折りたたまれ、テキストコンテンツは自動的に折り返されます。

• 空白がnowrapの場合、テキストコンテンツは自動的に折り返されません(強制的にコンテナを突破するか表示を切り詰めるかは、別のCSSに依存します - オーバーフロー、詳細は後述します)。その他の動作は通常の動作と一致します。 。

• 空白が前にある場合、改行は有効で、複数のスペースとタブは折り返されず、テキストは自動的に折り返されません。この属性は主にプログラム コード スニペットを表示するために使用され、改行とインデントを保持できます。

• プレラップとプレラインは表を見れば理解できますが、これ以上の詳細は説明しません。

長い単語がコンテナ全体の幅を超える場合にラップするかどうか: word-wrap

これは 長い単語がコンテナの幅を超える場合であり、英語のみを考慮することに注意する必要があります。中国語にはこの機能がありません。

word-wrap: normal|break-word;

• 通常の長い単語は改行されません

• break-word、長い単語は自動的に折り返されます

テキストの改行ポイントを決定します: word-break

単語 A が完全に配置できない場合行末に単語 A を配置するためにどの戦略を使用するかを決定する必要があります (英語である必要がありますが、中国語ではそのような問題はありません):

word-break: normal|break-all|keep-all;

• normal、ブラウザのデフォルトの改行を使用します。ルール。

• 根本的には、圧縮する方が健康的です。単語 A を押し込むだけで、収まらない部分は次の行に折り返されて表示が継続されます。これは実際には単語全体を考慮するのではなく、ラップできる最小単位として文字を使用します。

• keep-all 混雑していない場合は、単語が実際にその領域を占めている場合でも、圧縮しません。独自の行全体を表示することはできないため、新しい行を開始する必要があります:

word-wrap と word-break

これら 2 つの CSS プロパティは非常に似ており、1 つは改行用です。もう1つは英語用です。私の意見では、ワードブレークはワードラップよりも根本的です。なぜなら、ワードブレーク: ブレークオールが設定されている限り、「単語を分割する」という事実が根本的に否定され、代わりに「単語の配置方法」に変換されるからです。文字列」の場合、改行は自然です。そして、word-wrap:break-word; は、効果を示すために実際に単語を「単語」として扱います

単に妥協しています。

コンテンツ オーバーフロー コンテナ* の処理方法を指定します: overflow

属性はブロック要素に作用します。コンテンツ要素が要素ボックスからオーバーフローした場合に何が起こるかを指定します。コンテンツは切り取られるか、スクロール バーを使用して表示されるか、直接表示されます。

/* 默认值。内容不会被修剪，会呈现在元素框之外 */overflow: visible;

典型的なものは上記のとおりです:

/* 内容会被修剪，并且其余内容不可见 */overflow: hidden;

コンテナを超えたコンテンツを強制的に切り取ります:

/* 内容会被修剪，浏览器会显示滚动条以便查看其余内容 */overflow: scroll;

コンテナから溢れるコンテンツがあるかどうかに関係なく、

コンテンツが溢れている場合は常に スクロール バーを表示します。スクロール バーからオーバーフロー コンテンツを表示できます:

/* 由浏览器定夺，如果内容被修剪，就会显示滚动条 */overflow: auto;

コンテナからオーバーフローするコンテンツがある場合は、

スクロール バーのみを表示します:

/* 规定从父元素继承overflow属性的值 */overflow: inherit;

省略記号を追加します: text-overflow

text-overflow は overflow: hidden に基づいています; 等、オーバーフローが他の値（親ステータスが必要な場合）の場合は無効となります。 text-overflow には多くの望ましい値がありますが、実際、現在ブラウザの互換性が優れているのは、clip | ellipsis だけです。

clip: ブラウザのデフォルト値は、何も追加されていないことを意味します
ellipsis : 切り詰められたテキストコンテンツの最後に「Add a...」を付けます:

text-overflow は水平方向のオーバーフローのみをサポートします。つまり、テキスト コンテンツの 1 行のオーバーフローのみをサポートします (上の図の状況は複数行ですが、この状況は中国語では表示されません。中国語はすべて自動改行です)、複数行をサポートしたい場合は、プラグインを使用する必要があります。dotdotdot をお勧めします:

From: http://segmentfault.com/a/1190000004212980