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

HTML DOMのwordBreakプロパティとは？構文・値・実装例をわかりやすく解説

HTML DOMのスタイルオブジェクトが持つ wordBreak プロパティは、HTML文書内における中国語・日本語・韓国語（CJK）以外のスクリプト（主に英字テキストなど）の改行ルールを取得・変更するために使用されます。長い単語やURLなど、通常は改行されない文字列の折り返し方法をJavaScriptから動的に制御できるのが特徴です。

構文

wordBreakプロパティの基本的な構文は以下のとおりです。

値の取得

object.style.wordBreak

値の設定

object.style.wordBreak = "value"

指定できる値

wordBreakプロパティには、次の値を指定できます。

値説明
initialこのプロパティの値をデフォルト値に戻します。
inherit親要素からこのプロパティの値を継承します。
normal通常の改行ルールに従って単語を折り返します。
keep-all文字同士の間での改行を禁止します。CJK言語のテキストで特に有効です。
break-all任意の2文字の間で改行を許可します。長い英単語やURLも強制的に折り返せます。

実装例

ここでは、HTML DOMスタイルのwordBreakプロパティを使った具体的なサンプルコードを紹介します。

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        color: #000;
        background: lightblue;
        height: 100vh;
    }
    p {
        border: 2px solid #fff;
        width: 120px;
    }
    .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 wordBreak Property Example</h1>
<p>Thisisaparagraphelement.</p>
<button onclick="add()" class="btn">Set wordBreak</button>
<script>
    function add() {
        document.querySelector('p').style.wordBreak = "break-all"
    }
</script>
</body>
</html>

出力結果

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

HTML DOMのwordBreakプロパティとは？構文・値・実装例をわかりやすく解説

段落要素内にはスペースのない長い英単語が含まれていますが、初期状態では改行されずに表示されます。

ここで「Set wordBreak」ボタンをクリックすると、JavaScriptによって wordBreak プロパティに「break-all」が設定され、段落内の長い単語が任意の位置で折り返されて表示されます。

HTML DOMのwordBreakプロパティとは？構文・値・実装例をわかりやすく解説

まとめ

wordBreakプロパティを活用すれば、レイアウトを崩さずに長い単語やURLを適切に折り返すことができます。特にレスポンシブデザインでは、コンテナ幅に収まらないテキストへの対策として「break-all」や「keep-all」を使い分けることで、読みやすい表示を実現できます。

  1. HTML DOM スタイルの transformOrigin プロパティとは？使い方を徹底解説

    HTML DOM のスタイルオブジェクトが持つ transformOrigin プロパティは、HTML ドキュメント内の要素に対して 2D または 3D 変換を行う際の「原点（基準点）」を取得・設定するためのプロパティです。要素を回転や拡大縮小させる transform プロパティと組み合わせて使うことで、変換の基準となる位置を自由にコントロールできます。構文（シンタックス）transformOrigin プロパティの基本的な構文は以下のとおりです。値の取得object.style.transformOrigin値の設定object.style.transformOrigin = 値指定できる

  2. HTML DOMのwordBreakプロパティとは？構文・値・実装例をわかりやすく解説

    HTML DOMのスタイルオブジェクトが持つ wordBreak プロパティは、HTML文書内における中国語・日本語・韓国語（CJK）以外のスクリプト（主に英字テキストなど）の改行ルールを取得・変更するために使用されます。長い単語やURLなど、通常は改行されない文字列の折り返し方法をJavaScriptから動的に制御できるのが特徴です。構文wordBreakプロパティの基本的な構文は以下のとおりです。値の取得object.style.wordBreak値の設定object.style.wordBreak = value指定できる値wordBreakプロパティには、次の値を指定できます。値説明i