CSS のデータ属性を使用して疑似要素コンテンツに改行を追加するにはどうすればよいですか?

CSS および疑似要素コンテンツのデータ属性に改行文字を割り当てる

このクエリは、CSS に改行文字を組み込む可能性を検討します。データの属性。ユーザーは、疑似要素の content プロパティと data 属性から抽出された値を使用して、複数行のコンテンツを表示することを目的としています。

実装

最初のアプローチは、データ属性内の改行文字として「a」を使用すると、失敗することが判明しました。望ましい結果を達成するには、次の変更が必要です:

データ属性の変更:

• 「a」を「」に置き換えます。 "; この HTML エンティティは改行文字に対応します。

CSS 変更:

• content: attr(data-foo) ;: データ属性のコンテンツを表示する元の機能を維持します。
• background-color: black;white-space: pre; display: inline-block;:コンテンツは書式設定を保持し、個別のブロックとして表示されます。

最終コード:

CSS:

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

HTML:

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

この変更により、data 属性で定義された改行を維持しながら、擬似要素で複数行のコンテンツを表示できるようになります。

以上がCSS のデータ属性を使用して疑似要素コンテンツに改行を追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。