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

2021年8月12日2023年1月22日

目次へ

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がオススメ！同僚に差をつけよう！