HTML DOM スタイルの wordWrap プロパティとは？使い方をわかりやすく解説
HTML DOM の wordWrap プロパティは、HTML ドキュメント内で長い単語が要素の幅からあふれないように、途中で改行して次の行へ折り返すかどうかを取得および変更するために使用されます。
URL などのスペースを含まない長い文字列がレイアウトを崩してしまう問題を防ぎたい場合に特に役立ちます。
構文
wordWrap プロパティの基本的な構文は以下の通りです。
wordWrap の値を取得する場合
object.style.wordWrap
wordWrap の値を変更する場合
object.style.wordWrap = "value"
指定できる値
value には以下の値を指定できます。
| 値 | 説明 |
|---|---|
| initial | このプロパティの値をデフォルト値に設定します。 |
| inherit | 親要素からこのプロパティの値を継承します。 |
| normal | 必要な場合にのみ単語を折り返します（デフォルト動作）。 |
| break-word | 通常なら折り返せない長い単語も、必要に応じて途中で改行できるようにします。 |
サンプルコード
それでは、HTML DOM スタイルの wordWrap プロパティを使った具体的な例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
background: lightblue;
height: 100vh;
}
p {
border: 2px solid #fff;
width: 100px;
}
.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 wordWrap Property Example</h1>
<p>This is a paragraph element. This is a veryveryveryverylongword. This is another veryveryverylongword.</p>
<button onclick="add()" class="btn">Set wordWrap</button>
<script>
function add() {
document.querySelector('p').style.wordWrap = "break-word";
}
</script>
</body>
</html>実行結果
上記のコードを実行すると、以下のような画面が表示されます。
この状態では幅 100px の段落要素内に長い英単語があるため、テキストが要素からはみ出しています。
そこで「Set wordWrap」ボタンをクリックしてみましょう。JavaScript によって p 要素の wordWrap プロパティが break-word に設定され、長い単語が適切に折り返されて表示されます。
このように、wordWrap プロパティを活用すれば、JavaScript から動的に長い単語の折り返し挙動を制御でき、レスポンシブなレイアウトや URL 表示などでもテキストのはみ出しを防ぐことができます。
-
HTML DOM スタイルの transformOrigin プロパティとは？使い方を徹底解説
HTML DOM のスタイルオブジェクトが持つ transformOrigin プロパティは、HTML ドキュメント内の要素に対して 2D または 3D 変換を行う際の「原点（基準点）」を取得・設定するためのプロパティです。要素を回転や拡大縮小させる transform プロパティと組み合わせて使うことで、変換の基準となる位置を自由にコントロールできます。構文（シンタックス）transformOrigin プロパティの基本的な構文は以下のとおりです。値の取得object.style.transformOrigin値の設定object.style.transformOrigin = 値指定できる
-
HTML DOM スタイルの wordWrap プロパティとは？使い方をわかりやすく解説
HTML DOM の wordWrap プロパティは、HTML ドキュメント内で長い単語が要素の幅からあふれないように、途中で改行して次の行へ折り返すかどうかを取得および変更するために使用されます。URL などのスペースを含まない長い文字列がレイアウトを崩してしまう問題を防ぎたい場合に特に役立ちます。構文wordWrap プロパティの基本的な構文は以下の通りです。wordWrap の値を取得する場合object.style.wordWrapwordWrap の値を変更する場合object.style.wordWrap = value指定できる値value には以下の値を指定できます。値説明in