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

前書き

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

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

ご存知のとおり、ブラウザは HTML の改行を無視するため、一般に改行には
を使用することをお勧めします。また、複数のスペース (スペース) とタブは 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: normal|break-all|keep-all;

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

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

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

単に妥協しています。

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

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

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

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

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

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

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

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