HTML DOMスタイルのtextOverflowプロパティとは？使い方を徹底解説
HTMLドキュメントにおけるDOMスタイルのtextOverflowプロパティは、テキストが要素のコンテナからあふれ出た場合に、その部分をどのように表示するかを取得・設定するためのプロパティです。
構文（Syntax）
textOverflowプロパティの基本的な構文は以下の通りです。
値の取得
object.style.textOverflow
値の設定
object.style.textOverflow = "value"
指定できる値
valueには以下の値を指定できます。
| 値 | 説明 |
|---|---|
| inherit | 親要素からこのプロパティの値を継承します。 |
| initial | このプロパティの値をデフォルト値に設定します。 |
| clip | あふれたテキストを切り取って表示します。 |
| ellipsis | 切り取られたテキストの代わりに省略記号（「...」）を表示します。 |
| string | 切り取られたテキストの代わりに、指定した任意の文字列を表示します。 |
サンプルコード
それでは、styleのtextOverflowプロパティを使った具体的な例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
background: lightblue;
height: 100vh;
}
p {
margin: 1.5rem auto;
border: 3px solid #fff;
width: 400px;
white-space: nowrap;
overflow: hidden;
text-overflow: visible;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
}
</style>
</head>
<body>
<h1>DOM Style textOverflow Property Example</h1>
<p>
This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
</p>
<button onclick="add()" class="btn">Change textOverflow</button>
<script>
function add() {
document.querySelector('p').style.textOverflow = "ellipsis";
}
</script>
</body>
</html>実行結果
上記のコードを実行すると、次のような出力が得られます。
「Change textOverflow」ボタンをクリックすると、あふれている段落テキストの表示方法が変化し、切り取られた部分に省略記号（「...」）が追加されます。
まとめ
textOverflowプロパティを使用することで、要素からあふれるテキストの表示方法を柔軟に制御できます。特に「ellipsis」を指定する方法は、ニュースサイトやブログの一覧表示などで長いテキストを見栄えよく省略したい場合に非常に便利です。なお、このプロパティを有効にするには、あわせて「overflow: hidden」と「white-space: nowrap」を設定する必要がある点に注意しましょう。
-
HTML DOMスタイルのuserSelectプロパティとは？テキスト選択の制御方法を解説
HTML DOMのuserSelectプロパティは、HTMLドキュメント内で要素のテキストがユーザーによって選択可能かどうかを取得・設定するためのプロパティです。このプロパティを活用することで、Webページ上のテキストのコピーやドラッグによる選択を柔軟に制御できます。構文userSelectプロパティの基本的な構文は以下のとおりです。userSelectの値を取得する場合object.style.userSelectuserSelectの値を設定する場合object.style.userSelect = value;設定できる値valueには以下のいずれかの値を指定できます。値説明autoブラ
-
HTML DOMのstyle.directionプロパティとは？テキスト方向の指定方法を解説
HTML DOMのstyle.directionプロパティは、要素内のテキストの流れる方向（文字方向）を取得・設定するために使用されるプロパティです。デフォルト値は「ltr」となっています。この記事では、directionプロパティの基本的な使い方から、設定できる値、実際に動作するコード例までをわかりやすく解説します。directionプロパティの構文directionプロパティをJavaScriptで設定する場合、以下のような構文を使用します。object.style.direction = ltr|rtl|initial|inherit;設定できる値の一覧directionプロパティには、