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

CSSのwhite-spaceプロパティで空白・改行・テキストの折り返しを制御する方法

CSSのwhite-spaceプロパティは、要素内の半角スペースやタブ、改行といった空白文字の扱い方、そしてテキストをどこで折り返すかを制御するためのプロパティです。レイアウトの微調整や整形済みテキストの表示など、さまざまな場面で活用できます。

white-spaceプロパティの主な値

  • normal：連続する空白をひとつにまとめ、テキストは必要に応じて自動的に折り返します（初期値）。
  • nowrap：連続する空白はまとめられますが、テキストは一切折り返されず、1行で表示され続けます。
  • pre：HTMLのpreタグと同じように、空白と改行をそのまま保持し、折り返しは行われません。
  • pre-wrap：空白と改行を保持しつつ、コンテナ幅に応じて適切に折り返します。
  • pre-line：連続する空白はまとめられますが、改行は保持され、必要に応じて折り返されます。

使用例

以下のコードを実行すると、white-spaceプロパティの実際の動作を確認できます。

<html>
<head>
</head>
<body>
  <p style="white-space:pre;">
    This text has a line break and the white-space pre setting tells the browser to honor
    it just like the HTML pre tag.</p>
</body>
</html>

コードの解説

この例では、p要素に対して「white-space: pre;」を指定しています。通常、HTMLではソースコード内の改行やインデントは無視されてしまいますが、「pre」を指定することで、ソース中の改行がブラウザ上にもそのまま反映され、preタグを使った場合と同等の表示になります。コードブロックや詩、住所など、レイアウトを厳密に保持したいテキストを表示したい場合に特に便利です。

  1. CSSのborder-right-styleプロパティの使い方を徹底解説

    border-right-styleプロパティとはCSSのborder-right-styleプロパティは、要素の右側の境界線（ボーダー）のスタイルを指定するためのプロパティです。破線や点線、実線など、さまざまな線種を設定できます。主な値の一覧none … ボーダーを表示しない（初期値）solid … 一本の実線dashed … 破線dotted … 点線double … 二重線groove / ridge / inset / outset … 立体的な装飾線実装例以下のコードでは、右側のボーダーに破線（dashed）を適用しています。border-widthで線の太さを4pxに設定し、bor

  2. CSSのwhite-spaceプロパティとは？要素内の空白・改行の扱い方を徹底解説

    CSSのwhite-spaceプロパティを使うと、HTML要素内の半角スペース、タブ、改行などの空白文字をどのように表示するかを細かく制御できます。デフォルトでは連続する空白は1つにまとめられますが、このプロパティを指定することで、ソースコード上の空白や改行をそのまま反映させたり、逆に折り返しを禁止したりすることが可能です。 white-spaceプロパティの基本例 以下は、normalとpreという2つの値を使って、空白の扱いの違いを比較するサンプルコードです。 <!DOCTYPE html> <html> <head> <style>