將換行符合並到偽元素內容
將多行加入::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中文網其他相關文章！
