データ属性に改行を入れることはできますか?
私はこのようなことをしようとしています:
CSS:
[data-foo]:after {
content: attr(data-foo);
background-color: black;
}
HTML
<div data-foo="First line \a Second Line">foo</div>
「\a」は CSS の改行であることがわかりましたが、それでもうまくいきません。
データ属性に改行を入れることはできますか?
私はこのようなことをしようとしています:
CSS:
[data-foo]:after {
content: attr(data-foo);
background-color: black;
}
HTML
<div data-foo="First line \a Second Line">foo</div>
「\a」は CSS の改行であることがわかりましたが、それでもうまくいきません。
属性値内で単純な改行を使用できます。
<div data-foo="First line
Second Line">foo</div>
ブラウザーはこの点でバグが多く、HTML 仕様はこれについて明確ではありませんでした。彼らは、要素のコンテンツ(スペースと同等と見なされている)の改行の意味については説明していますが、属性値については説明していません。HTML5 CR では、属性値の解析規則により、属性値に単純に改行が追加されることが明確になります。最近のブラウザは、一般にこのようなルールに従っています。
ただし、 を介して CSS で値を使用する場合、attr(...)
通常、改行はスペースと同等に扱われるためwhite-space
、疑似要素に、改行を有効にする値、つまりpre
、pre-wrap
、またはを設定する必要がありますpre-line
。
PS HTML では、表記\a
は 2 つのデータ文字だけで、特別な意味はありません。表記

は改行 (具体的には LINE FEED) を示しますが、ソース内の実際の改行と同じです。