【CSS】img要素のalt属性（代替テキスト）を任意の位置で改行する方法

img要素のalt属性（代替テキスト）を任意の位置で改行する方法

代替テキストを任意の位置で改行したい場合は以下のように記述します。

See the Pen
img-hamideru1 by shiakisudev (@shiakisu)
on CodePen.

STEP.1

img要素を用意する

HTML

<img id="pattern1" src="abcde.jpg" alt="" >

STEP.2

CSSで改行の設定をする

white-space:preを設定します。

CSS

white-space:pre

STEP.2

JavaScriptで代替テキストの文字列を生成する

改行を入れたい位置に\r\nを設定します。

JavaScript

let text = "あいう\r\nえおか\r\nきくけ\r\nこ";
document.getElementById("pattern1").setAttribute('alt',text);

以上で記事の解説はお終い！

HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ！同僚に差をつけよう！