如何使用CSS換行顯示多行資料屬性內容？

使用換行符操作資料屬性和偽元素內容

在CSS 中，可以使用attr() 函數從資料屬性中檢索值並將其顯示為使用偽元素的內容。但是，在這些資料屬性中合併新行可能具有挑戰性。

問題：資料屬性中的新行字元

考慮以下程式碼範例：

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

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

儘管使用了「a」轉義序列（在CSS中表示換行符），data-foo 屬性中的內容仍保留在單一字元上

解決方案：增強資料屬性語法和空白配置

要啟用多行資料屬性，請修改語法如下：

[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中文網其他相關文章！