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>

在此場景中，「a」字元預計是CSS 中的換行符，未能產生所需的

解決方案：

要實現所需的行為，請修改資料屬性，如下所示：

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

說明：

• 符號表示 HTML 中的換行符。
• 為偽元素加入空白屬性，透過「white-space: pre;」實作樣式，保留資料屬性內的空白。
• 「display: inline-block;」 style 允許偽元素包裹多行。
• 因此，data 屬性的內容（包括換行符）將如預期呈現。

以上是CSS資料屬性可以用偽元素渲染換行符號嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！