CSS のデータ属性に改行文字を含めることはできますか?

CSS データ属性および疑似要素コンテンツ内の改行文字の処理

質問:

CSSのデータ属性に改行文字を含めることはできますか？具体的には、次の CSS と HTML の組み合わせでこれを実現できますか:

[data-foo]:after {
    content: attr(data-foo);
    background-color: black;
}

<div data-foo="First line \a Second Line">foo</div>

答え:

CSS データ属性に改行を含めることは確かに可能です。ただし、提供されている例は、正しい構文を示しているわけではありません。望ましい結果を達成するには、次の手順に従います。

1.データ属性の変更:

<div data-foo="First line &amp;#xa; Second Line">foo</div>

この更新された HTML では、改行文字 (a) が HTML エンティティ に置き換えられます。このエンティティは、コンテンツ内に新しい行を作成する改行 (LF) 文字を表します。

2. CSS を調整します:

[data-foo]:after {
    content: attr(data-foo);
    background-color: black;
    color: white;
    white-space: pre;
    display: inline-block;
}

CSS で、次のプロパティを追加します:

• white-space: pre; の空白を保持します。改行を含むコンテンツ。
• display: inline-block; コンテンツが周囲のテキストの流れを壊さないようにします。

この変更された CSS により、改行を含む data 属性の内容が意図したとおりに表示されていることを確認します。

以上がCSS のデータ属性に改行文字を含めることはできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。