CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのwhite-spaceプロパティで要素内の空白を制御する方法

CSSのwhite-spaceプロパティとは

HTML内の半角スペース・タブ・改行などの空白文字は、通常ブラウザによって自動的に処理されます。white-spaceプロパティを使用すると、要素内の空白をどのように扱うかを細かく制御できます。

主なwhite-spaceの値

  • normal：連続する空白を1つにまとめ、必要に応じて自動的に折り返します（初期値）。
  • pre：空白と改行をそのまま保持して表示します。HTMLの<pre>タグと同様の動作です。
  • nowrap：空白はまとめますが、折り返しを行いません。
  • pre-wrap：空白を保持しつつ、必要に応じて折り返します。
  • pre-line：改行は保持しますが、連続する空白はまとめられます。

使用例

以下の例では、white-space: normal; と white-space: pre; の2つの値を指定し、表示の違いを確認できます。

<!DOCTYPE html>
<html>
<head>
<style>
p.demo1 {
white-space: normal;
}
p.demo2 {
white-space: pre;
}
</style>
</head>
<body>
<h2>空白の制御</h2>
<p class="demo1">
This is demo text.
This is demo text.
</p>
<p class="demo2">
This is demo text.
This is demo text.
</p>
</body>
</html>

表示結果の違い

demo1（normal）では、ソースコード内の改行や連続したスペースが無視され、テキストが1行につながって表示され、画面幅に合わせて自動的に折り返されます。

一方、demo2（pre）では、ソースコード内の改行とスペースがそのまま維持されるため、入力した通りの整形済みテキストとして出力されます。

まとめ

white-spaceプロパティを活用すれば、コードスニペットや整形済みテキストなど、空白の扱いが重要なコンテンツを意図どおりに表示できます。用途に応じて適切な値を選択しましょう。

  1. CSSでホバー時に要素をズーム（拡大）表示する方法

    CSSで要素にマウスカーソルを合わせたとき（ホバー時）に、その要素をズーム・拡大表示するには、transformプロパティとtransitionプロパティを組み合わせて使用します。以下に具体的なコード例を示します。コード例<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> * { box-sizing: bo

  2. CSSアニメーションで要素を円形の軌道上に移動させる方法

    CSSアニメーションを活用すると、rotate（回転）とtranslate（平行移動）を組み合わせることで、要素をさまざまな方法で動かすことができます。 本記事では、このテクニックを応用して、要素を円形の軌道（サーキュラーパス）に沿って移動させる方法を解説します。 円形移動の仕組み ポイントは、@keyframesの中で以下の3つの変換を組み合わせることです。 rotate()：要素を回転させ、移動する向きを決める translateX()：回転させた方向へ要素を押し出し、中心からの距離を作る rotate()（逆回転）：要素自体の傾きを打ち消し、常に直立した状態を保つ アニメーションの進