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

CSSのwhite-spaceプロパティでテキストの流れと書式を制御する方法

CSSの white-space プロパティは、テキストの流れ(空白や改行の扱い方)と書式を制御するために使用されます。このプロパティを活用することで、ソースコード上の空白や改行をブラウザがどのように表示するかを細かく指定できます。

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

white-spaceプロパティには、目的に応じて以下のような値を指定できます。

  • normal:連続する空白を1つにまとめ、必要に応じて自動的に折り返します(初期値)。
  • 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>

この例では、white-space: pre; を指定することで、テキスト内の改行がHTMLのpreタグを使用した場合と同じように、ブラウザによってそのまま反映されます。整形済みのテキストやコードサンプルを表示したい場合に特に便利です。

  1. CSSでテキストを整形する方法｜主要プロパティとサンプルコードを徹底解説

    CSSを使うことで、テキストを見栄えよく整形し、読み手にとって魅力的なコンテンツを作成できます。この記事では、CSSでテキストのスタイルを設定する際に使用される主なプロパティについて、役割と使い方をわかりやすく解説します。 CSSの主なテキストフォーマット用プロパティ color（文字色） テキストの色を変更するためのプロパティです。カラーキーワード、16進数カラーコード、rgb()関数などで色を指定できます。 letter-spacing（文字間隔） 文字と文字の間隔を調整します。値を大きくすると字間が広がり、見出しなどにゆったりとした印象を与えられます。 line-height（行

  2. CSSのhyphensプロパティでテキストにハイフンを追加する方法

    CSSのhyphensプロパティを使用すると、テキスト内にハイフン（連字符）をどのように挿入するかを細かく制御できます。長い単語やURLなどがコンテナからはみ出すのを防ぎ、読みやすい行折り返しを実現したい場合に便利なプロパティです。 hyphensプロパティの主な値 none：ハイフンによる改行を一切行いません。&shy;などの手動指定も無効になります。 manual：&shy;（ソフトハイフン）など、HTML内で明示的に指定された位置でのみハイフンを挿入します（初期値）。 auto：ブラウザが各言語の規則に基づいて自動的にハイフンを挿入します。lang属性の指定が推奨されま