將換行符添加到:: after或之後：僞元素內容

我無法訪問HTML或PHP的頁面，只能通過CSS進行編輯。我一直在網站上進行修改，並通過::after或::before僞元素添加文本，並發現轉義Unicode應該用於添加內容之前或之後的空間。將換行符添加到:: after或之後：僞元素內容

如何在content屬性中添加多行？

在例如HTML斷線元素只形象化我想實現什麼：

#headerAgentInfoDetailsPhone::after 
{ 
content: 'Office: XXXXX <br /> Mobile: YYYYY '; 
}

2013-06-11 elkdee

CSS不是添加或編輯的內容，它是用來控制顯示內容如何 – underscore

@SamithaHewawasam雖然我與你的說法，它看起來像海報有發現自己處於無法編輯HTML的情況。對於小而簡單的內容添加，我可以明白爲什麼這將是有用/必要的。 –

可能重複[在CSS'content'屬性中的Newline字符序列？]（http://stackoverflow.com/questions/9062988/newline-character-sequence-in-css-content-property） – cimmanon

175

的content屬性狀態：

作者可以通過寫「\ A」中的字符串之一轉義序列的「內容」後屬性包括在所生成的內容的新行。此插入的換行符是仍受「空白」屬性限制。有關「\ A」轉義序列的更多信息，請參閱「字符串」和「字符和大小寫」。

所以，你可以使用：

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

2013-06-11 15:21:04 Adrift

+11

有一刻，我想「爲什麼'\ A'而不是'\ n'」 - 然後我記得換行符是'0x0A' :) –

我在打印媒體查詢中試過這個，它不起作用。它是一個錯誤還是默認行爲？沒有印刷媒體，它的作品。 – harryfeng

感謝提到'預包裝'！我遇到了'＃headerAgentInfoDetailsPhone' **的問題，不再包含在Blink引擎的瀏覽器中，例如Chrome。** Firefox不容易將'white-space：pre;'屬性傳播回元素。 –

在這裏找到這個問題似乎問同樣的事情：Newline character sequence in CSS 'content' property?

看起來像您可以使用\A或\00000a實現newline

2013-06-11 15:19:49

您可以試試這個

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

2013-06-11 15:20:20 Sachin

工作完美！非常感謝...我現在可以把這個任務休息了！ – elkdee

好文章explane你想要的東西

如果你需要有兩個內聯元素，其中一個破裂成在另一個元素內的下一行，你可以完成這個b Ÿ增加一個僞元素： '\ A' 和白色空間：與內容後，預

HTML

<h3> 
    <span class="label">This is the main label</span> 
    <span class="secondary-label">secondary label</span> 
</h3>

CSS

.label:after { 
    content: '\A'; 
    white-space: pre; 
}

2013-06-11 15:36:17 underscore

我必須有一個提示新線。我不得不添加這個CSS在我之後：

.tooltip:after { 
    width: 500px; 
    white-space: pre; 
    word-wrap: break-word; 
}

這個詞包裹似乎是必要的。

另外，\ A沒有在文字的中間顯示來強制換行。

&#13;&#10;

工作。當時我能夠得到這樣的提示：

2016-01-21 00:07:47

回答