CSSのテキスト要素内に空白パディングを設定するにはどうすればよいですか?

CSS のテキスト要素内に空白パディングを設定するにはどうすればよいですか?この記事ではcssを使ってテキスト要素に空白埋めを設定する方法を紹介します。困っている友人は参考にしていただければ幸いです。

今回ご紹介するのは、cssのwhite-spaceプロパティでテキスト要素内の空白埋めを設定する方法です。ホワイトスペース属性を見てみましょう。

white-space 属性は、適用先の要素上でテキストがどのように処理されるかを制御し、要素内の空白の処理方法を設定します。

以下では、このような HTML を作成します。

<div>
   A bunch of words you see.
</div>

div の幅を 100px に設定します。適切なフォント サイズで、100 ピクセルに収まるようにテキストを追加します。何もしません。デフォルトの空白値は通常であり、テキストは折り返されます。

div {
  white-space: normal; 
}

レンダリングを見てみましょう:

テキストの折り返しを防ぎたい場合は、 ホワイトスペース: nowrap を使用できます。 ;

注: この記事の先頭にある HTML コードの例では、実際には 2 つの改行があり、1 つはテキスト行の前、もう 1 つはテキスト行の後にあります。テキスト行。(コード内の) 独自の行にテキストを入れることができます。テキストがブラウザでレンダリングされると、これらの改行が削除されたようになります。最初の文字の前の余分なスペースも削除されます。ブラウザに改行や余分な空白文字を強制的に表示させたい場合は、white-space: pre;

pre を使用します。これは、テキストを

タグで囲んだように動作するためです (pre タグはデフォルトで空白と改行を処理できます)。 HTML では、空白はまったく問題なく使用でき、コード内に終了タグが表示されるまでテキストは折り返されません。これは、特定の書式設定から美的利点を得るためにコードを文字通りに表示する場合に特に便利です (また、空白に依存する言語など、特定の時間が絶対的に重要な場合にも!)

おそらく、pre の処理方法が気に入っているでしょう。ただし、親コンテナーから切り離される可能性があるのではなく、テキストを折り返す必要があります。それは、white-space: pre-wrap;:

最後に、white-space: pre-line; によって、コードが分割された場所で行が分割されますが、それでもコードが削除されます。余分な空白領域。

興味深いことに、最後の改行は無視されます。 CSS 2.1 仕様によれば、「必要に応じて行ボックスを埋めながら、保存された改行で行を区切る」となっています。

これは、すべてのさまざまな値の動作を理解するための表です:

CSS3 では、空白プロパティは実際にその表に従い、プロパティも同様になります。 text-space-collapse にマップし、それに応じて text-wrap を実行します。

互換性

表内の数字は、この属性をサポートする最初のブラウザのバージョン番号を示します。

要約: 上記がこの記事の全内容です。皆さんの学習に役立つことを願っています。

以上がCSSのテキスト要素内に空白パディングを設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。