如何在CSS中的偽元素內容中加入換行符？

將換行符合並到偽元素內容

將多行加入::after 或::before 偽元素的內容屬性中可以增強可讀性和格式。然而，僅透過 CSS 執行此操作是一個挑戰。

使用「A」轉義序列

內容屬性文件建議使用「A」轉義序列在產生的內容中包含換行符。此插入的換行符遵循 'white-space' 屬性。

為了說明其應用，請考慮以下範例：

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

此程式碼在「Office」之間加上換行符和「移動」文本，將內容格式化為多行。請參閱 http://jsfiddle.net/XkNxs/ 上的現場演示。

注意事項

轉義任意字串時，請使用「0000a」而不是「A」以防止類似數字或十六進位值的後續字符導致不可預測的結果。安全實現此目的的範例函數：

function addTextToStyle(id, text) {
  return `#${id}::after { content: "${text.replace(/"/g, '\"').replace(/\n/g, '\00000a')} }"`;
}

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