HTMLのtitle属性やalt属性のテキストに改行を入れる方法！

HTMLのtitle属性やalt属性

みなさんはHTMLのtitle属性やalt属性を設定していますでしょうか？

title属性

alt属性

両方とも設定した方がよりユーザーライクであり、SEOライクであると言われているこれらの属性ですが、title属性・alt属性で設定したテキストに改行を入れたいという場合もあるかと思います。

改行タグのbrや改行コードの「\n」などを入れてみた方もいるかと思いますが、title属性やalt属性では改行タグや改行コードは効きず困ってしまします。

そこで今回の記事ではHTMLのtitle属性やalt属性のテキストを改行する方法をご紹介します。

HTMLのtitle属性やalt属性のテキストに改行を入れる方法

HTMLのtitle属性やalt属性のテキストに改行を入れる方法は複数あります。順番にご紹介します。
（いずれも今回MacのGoogle Chromeで確認しております）

普通に改行する

なんと１つ目の方法はHTMLの文章中で普通に改行するだけです。以下サンプルコードです。
※サンプルコードの結果の文章にマウスを持っていくと、ツールチップのようにtitle属性の文章が表示されます。

普通に改行.html

結果

1
2
3
4
5
<p title="title属性のテキスト
ここで改行">あいうえおかきくけこさしすせそたちつてと</p>
<img alt="alt属性のテキスト
ここで改行">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

いかがでしょうか？title属性はちゃんと改行されてツールチップが表示されますので、これでokのようですね。一方でimgタグのalt属性は普通に改行してもだめなようです。

実体参照の改行文字を入れてみる

次に実体参照の改行文字を入れてみましょう。以下のいずれかを使います。

実体参照の改行文字.html

結果

1
2
<p title="title属性のテキスト&#13;&#10;ここで改行">あいうえおかきくけこさしすせそたちつてと</p>
<img alt="alt属性のテキスト&#13;&#10;ここで改行">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

実体参照の改行コードでもtitle属性は改行され、alt属性は改行されないようです。

JavaScriptで改行させてみる

JavaScriptで改行.html

結果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <p id="title">あいうえおかきくけこさしすせそたちつてと</p>
  <img id="img" src="test.jpeg">
  <script>
    document.getElementById("title").title = "title属性のテキスト\nここで改行";
    document.getElementById("img").setAttribute('alt', "alt属性のテキスト\nここで改行");
  </script>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

JSで改行文字を入れた場合も同様に、title属性だけ改行され、alt属性は改行されない結果となります。

alt属性を改行させる

ではalt属性のテキストを改行させるにはどうしたらいいのでしょうか。

alt属性のテキストを改行させるにはCSSのwhite-spaceプロパティを使う必要があります。

white-space調整.html

結果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <style>
    img {
      white-space: pre;
    }
  </style>
</head>
<body>
  <p title="title属性のテキスト&#13;&#10;ここで改行">あいうえおかきくけこさしすせそたちつてと</p>
  <img alt="alt属性のテキスト&#13;&#10;ここで改行">
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

いかがでしょうか。これまで改行されなかった、alt属性のテキストがようやく改行されました。

ちなみにwhite-spaceは要素内のスペースや改行の扱いを決めるプロパティで、「pre」を指定すると、行の折り返しは改行文字や改行タグが有効になる効果があります。