CSS 中的資料屬性可以包含換行符嗎？-css教學-PHP中文網

CSS 中的資料屬性可以包含換行符嗎？

Mary-Kate Olsen

發布： 2024-11-12 16:05:02

原創

502 人瀏覽過

Can Data Attributes in CSS Contain New Line Characters?

處理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 中，加入以下屬性：

此修改後的 CSS 可確保資料屬性的內容（包括新行）如預期顯示。

以上是CSS 中的資料屬性可以包含換行符嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！