【8/27まで】Udemyの人気コースが今なら1,200円から!!

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

【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);

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です