CSS'content'屬性中的換行符序列？

是否可以使用換行字符在CSS content屬性強制換行？喜歡的東西：CSS'content'屬性中的換行符序列？

figcaption:before 
{ 
    content: 'Figure \n' + attr(title); 
}

此答案有幫助嗎？ http://stackoverflow.com/a/4609491/582278 – 2012-01-30 11:22:08

@Blowski，是的，但它不能在我的[小提琴]（http://jsfiddle.net/saeedneamati/q4WC4/） – 2012-01-30 11:28:33

@SaeedNeamati在我的。你在找什麼瀏覽器？ – 2012-01-30 11:31:05

119

的content屬性接受一個string和：

的字符串不能直接包含換行。要在字符串中包含換行符，請使用代表換行符 ISO-10646（U + 000A）的換行符，例如「\ A」或「\ 00000a」。這個字符表示CSS中「新行」的一般概念。

（不知道有關實際瀏覽器的支持。）

2012-01-30 11:23:56

沒有什麼比打折。 +1 – 2012-01-30 11:25:35

+28

請注意，以這種方式插入的換行符與HTML文檔中的任何其他換行符一樣：默認情況下，它們將被瀏覽器渲染爲常規空格字符，並且僅作爲預格式化內容中的常規換行符。 – BoltClock 2012-01-30 11:26:11

它不起作用。 [jsfiddel]（http://jsfiddle.net/saeedneamati/q4WC4/）。 – 2012-01-30 11:27:14

105

figcaption:before 
{ 
    content: 'Figure \a' attr(title); 
    white-space: pre; 
}

注意的是，在content屬性值，拼接只是由空格表示，而不是由一個「+」號。 CSS字符串文字中的轉義符號\a表示換行符。

2012-01-30 11:27:47

仍然無法正常工作。更新[小提琴]（http://jsfiddle.net/saeedneamati/q4WC4/2/） – 2012-01-30 11:30:06

'白色空間：前'丟失。請參閱http://jsfiddle.net/FP5gX/ 我添加了''''，因爲您可能需要這個空間。 – 2012-01-30 11:49:43

@Jan應該使用':: before'還是'：before'？ – Ormoz 2014-09-15 13:27:01

回答