CSS を使用して複数行のデータ属性コンテンツを改行で表示するにはどうすればよいですか?

改行によるデータ属性と疑似要素コンテンツの操作

CSS では、attr() 関数を使用してデータ属性から値を取得し、次のように表示することができます。擬似要素を使用したコンテンツ。ただし、これらのデータ属性内に新しい行を組み込むのは難しい場合があります。

問題: データ属性内の改行文字

次のコード例を考えてみましょう:

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

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

CSS で改行文字を表す「a」エスケープ シーケンスを使用しているにもかかわらず、data-foo 属性内のコンテンツは 1 行のままです。

解決策: 拡張されたデータ属性構文と空白の構成

複数行のデータ属性を有効にするには、構文を次のように変更します。

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

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

この変更されたバージョンでは、

• white-space: pre; : 改行を含むデータ属性内の空白文字を保持します。
• display: inline-block;: テキストの折り返しを防止し、コンテンツが複数行に渡って表示されるようにします。
• ;: 改行の HTML エンティティ。

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