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

CSSのwhite-spaceプロパティでテキスト間の空白を設定する方法

CSSでテキスト間の空白（ホワイトスペース）を制御するには、white-spaceプロパティを使用します。このプロパティに指定できる主な値は、normal、pre、nowrapの3つです。

white-spaceプロパティの各値の違い

normal

デフォルト値です。連続する空白やタブは1つの空白にまとめられ、テキストはコンテナの幅に応じて自動的に折り返されます。

pre

HTMLの<pre>タグと同様の動作になります。ソースコード内の空白や改行がそのまま表示され、自動的な折り返しは行われません。

nowrap

連続する空白は1つにまとめられますが、テキストは折り返されません。<br>タグなど明示的な改行がある場合のみ、改行されます。

使用例

以下のコードを実行して、CSSでテキスト間の空白を設定する方法を確認してみましょう。

<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のcolumn-rule-widthプロパティで段組みの罫線の太さを設定する方法

    CSSで段組み（マルチカラム）レイアウトを作成する際、各カラム（列）の間に表示される罫線（ルールライン）の太さを指定できるのが column-rule-width プロパティです。column-rule-widthプロパティとはcolumn-rule-width プロパティは、カラム間の罫線の幅を設定します。このプロパティを有効に機能させるには、column-rule-style プロパティで罫線のスタイル（実線、破線など）をあらかじめ指定しておく必要があります。スタイルが指定されていない場合や none の場合は、罫線の幅に関わらず罫線は表示されません。指定できる主な値は以下のとおりです。t

  2. CSSのcolumn-rule-styleプロパティで列間の罫線スタイルを設定する方法

    マルチカラムレイアウトにおいて、列と列の間に表示される罫線（ルール）のスタイルを設定するには、CSSの column-rule-style プロパティを使用します。このプロパティを使うことで、破線や点線、実線など、さまざまなデザインの区切り線を簡単に実装できます。column-rule-styleで指定できる主な値none … 罫線を表示しない（初期値）hidden … 罫線を非表示にするdotted … 点線で表示するdashed … 破線で表示するsolid … 実線で表示するdouble … 二重線で表示するgroove / ridge / inset / outset … 立体的な装飾