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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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