如何將多行文字注入CSS偽元素？

將多行文字注入偽元素

僅透過CSS 修改來修改網頁內容時，可能需要合併多行文字-line 文字到::after 或::before 偽元素中。雖然在此上下文中不支援傳統的 HTML 換行符，但利用轉義序列提供了一種解決方案。

解決方案

CSS 內容屬性允許透過以下方式包含換行符將「A」轉義序列嵌入到內容字串中。然而，產生的換行符仍然受“空白”屬性的影響。因此，為了保留多行格式，設定 'white-space: pre;' 至關重要或 'white-space: pre-wrap;'。

例如：

#headerAgentInfoDetailsPhone::after {
  content: "Office: XXXXX \A Mobile: YYYYY ";
  white-space: pre; /* or pre-wrap */
}

推薦

為了增強交叉相容性，它在處理Unicode 換行符時，建議使用「0000a」序列而不是“A”。這種方法可確保在潛在的字串操作不確定性中準確換行。

以上是如何將多行文字注入CSS偽元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！