HTML ツールチップ 改行方法
2024-09-26
HTMLにおけるキャリッジリターン（改行）の使用方法
HTMLのツールチップ（title属性）で改行を実現する方法
HTMLのツールチップは、要素のtitle属性を使用して表示されます。この属性に複数の行のテキストを指定したい場合、改行を挿入する必要があります。
方法1: ブレークタグ（<br>）を使用
<p title="これは<br>複数行の<br>ツールチップです。">ツールチップを表示</p>
方法2: エスケープシーケンスを使用
<p title="これは\n複数行の\nツールチップです。">ツールチップを表示</p>
ここで、\nは改行を表すエスケープシーケンスです。
注意
- 他のHTML要素や属性は、ツールチップ内に直接使用できません。
- どちらの方法でも、ツールチップのテキストは改行されて表示されます。
例
<p title="これは<br>複数行の<br>ツールチップです。">ツールチップを表示</p>
<button title="ボタンの\nツールチップです。">ボタン</button>
<img src="image.jpg" alt="画像" title="画像の\n説明です。">
HTML ツールチップ 改行方法のコード例
<p title="これは<br>複数行の<br>ツールチップです。">ツールチップを表示</p>
<p title="これは\n複数行の\nツールチップです。">ツールチップを表示</p>
解説
brタグは、行を改行します。title属性は、要素にマウスオーバーしたときに表示されるツールチップのテキストを指定します。
<p title="これは<br>複数行の<br>ツールチップです。">ツールチップを表示</p>
<button title="ボタンの\nツールチップです。">ボタン</button>
<img src="image.jpg" alt="画像" title="画像の\n説明です。">
<p title="これは複数行のツールチップです。">ツールチップを表示</p>
p::tooltip {
white-space: pre-wrap;
}
white-space: pre-wrapプロパティは、テキストを改行可能な状態で保持し、必要に応じて自動的に改行します。
<p title="これは複数行のツールチップです。">ツールチップを表示</p>
<style>
p::tooltip {
white-space: pre-wrap;
}
</style>
- この方法は、CSSのサポート状況によってはブラウザ間で動作が異なる場合があります。
- それぞれの方法には利点と欠点がありますので、状況に応じて適切な方法を選択してください。
- HTMLのツールチップで改行を実現するには、ブレークタグ（
<br>）を使用するか、エスケープシーケンス（\n）を使用するか、CSSのwhite-spaceプロパティを使用することができます。
html title tooltip
