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

HTML DOM スタイルの whiteSpace プロパティとは？使い方と設定値を解説

HTML DOM の style.whiteSpace プロパティは、HTML ドキュメント内の要素テキストにおけるタブ・改行・空白文字の表示方法を取得および設定するために使用されます。テキストの折り返しや空白の扱いを動的に制御したい場合に便利なプロパティです。

構文（シンタックス）

whiteSpace プロパティの基本的な構文は以下の通りです。

whiteSpace の値を取得する場合

object.style.whiteSpace

whiteSpace の値を変更する場合

object.style.whiteSpace = "value"

設定できる値

whiteSpace プロパティには、以下の値を指定できます。

値説明
initialプロパティの値をデフォルト値（初期値）に設定します。
inherit親要素からこのプロパティの値を継承します。
normal連続する空白文字は 1 つにまとめられ（ホワイトスペースの圧縮）、テキストは必要に応じて自動的に折り返されます。初期値です。
nowrap連続する空白文字は 1 つにまとめられますが、テキストは次の行へ折り返されません。
pre空白文字はブラウザによってそのまま保持され、ソースコード中の明示的な改行位置でのみ折り返されます。HTML の <pre> 要素と同様の挙動です。
pre-line連続する空白文字は 1 つにまとめられ、テキストは必要に応じて折り返されます。また、ソースコード中の改行も反映されます。
pre-wrap空白文字はブラウザによってそのまま保持され、必要に応じてテキストが折り返されます。

サンプルコード

それでは、HTML DOM の whiteSpace プロパティを使用した具体例を見てみましょう。ボタンをクリックすると、段落要素の whiteSpace プロパティが「pre-line」に変更される仕組みです。

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        color: #000;
        background: lightblue;
        height: 100vh;
    }
    p {
        border: 2px solid #fff;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
        margin: 1rem 0;
}
</style>
</head>
<body>
<h1>DOM Style whiteSpace Property Example</h1>
<p>
    I'm paragraph element with some dummy text. I'm paragraph element with some dummy text.
    I'm paragraph element with some dummy text. I'm paragraph element with some dummy text.
    I'm paragraph element with some dummy text.
</p>
<button onclick="add()" class="btn">Change whiteSpace</button>
<script>
    function add() {
        document.querySelector('p').style.whiteSpace = "pre-line";
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような出力が表示されます。

HTML DOM スタイルの whiteSpace プロパティとは？使い方と設定値を解説

「Change whiteSpace」ボタンをクリックすると、段落要素の空白文字の扱い方が変化し、改行が反映された表示に切り替わります。

HTML DOM スタイルの whiteSpace プロパティとは？使い方と設定値を解説

このように、whiteSpace プロパティを活用することで、JavaScript から動的にテキストの空白や改行の表示方法を制御できます。CSS の white-space プロパティと同じ値を使用するため、スタイルシートの知識があれば直感的に扱えるでしょう。

  1. HTML DOMスタイルのuserSelectプロパティとは？テキスト選択の制御方法を解説

    HTML DOMのuserSelectプロパティは、HTMLドキュメント内で要素のテキストがユーザーによって選択可能かどうかを取得・設定するためのプロパティです。このプロパティを活用することで、Webページ上のテキストのコピーやドラッグによる選択を柔軟に制御できます。構文userSelectプロパティの基本的な構文は以下のとおりです。userSelectの値を取得する場合object.style.userSelectuserSelectの値を設定する場合object.style.userSelect = value;設定できる値valueには以下のいずれかの値を指定できます。値説明autoブラ

  2. HTML DOMのstyle.directionプロパティとは？テキスト方向の指定方法を解説

    HTML DOMのstyle.directionプロパティは、要素内のテキストの流れる方向（文字方向）を取得・設定するために使用されるプロパティです。デフォルト値は「ltr」となっています。この記事では、directionプロパティの基本的な使い方から、設定できる値、実際に動作するコード例までをわかりやすく解説します。directionプロパティの構文directionプロパティをJavaScriptで設定する場合、以下のような構文を使用します。object.style.direction = ltr|rtl|initial|inherit;設定できる値の一覧directionプロパティには、