CSS開報價顯示1個引號

我使用下面的CSS一個段落之前加開報價：CSS開報價顯示1個引號

blockquote { 
    padding: 22px; 
    quotes: "\201C""\201D""\2018""\2019"; 
    font-size: 15px; 
} 
blockquote:before { 
    color: #111; 
    content: open-quote; 
    font-size: 4em; 
    line-height: 0; 
    vertical-align: -0.4em; 
}

當我添加兩個以上的引用文字，他們只顯示1引號。我想要顯示2 "。我無法弄清楚爲什麼會發生這種情況。例如，請參閱jsfiddle。

http://jsfiddle.net/yg7j5mkm/

來源

2014-08-31 CyberJunkie

，您必須關閉引號前打開另一個。

解決方法：關閉引號，但不可見。

blockquote { 
 
    padding: 22px; 
 
    quotes: "\201C""\201D""\2018""\2019"; 
 
    font-size: 15px; 
 
} 
 
blockquote:before { 
 
    color: #111; 
 
    content: open-quote; 
 
    font-size: 4em; 
 
    line-height: 0; 
 
    vertical-align: -0.4em; 
 
} 
 
blockquote:after { 
 
    visibility: hidden; 
 
    color: #111; 
 
    content: close-quote; 
 
    font-size: 4em; 
 
    line-height: 0; 
 
    vertical-align: -0.4em; 
 
}

<blockquote> 
 
    <p style="display:inline;">Lorem ipsum dolor...</p> 
 
</blockquote> 
 

 
<blockquote> 
 
    <p style="display:inline;">Lorem ipsum dolor...</p> 
 
</blockquote> 
 

 
<blockquote> 
 
    <p style="display:inline;">Lorem ipsum dolor...</p> 
 
</blockquote>

來源

2014-08-31 03:33:22

謝謝！這工作:)我不認爲有必要重複'：after'選擇器中的blockquote樣式。 – CyberJunkie 2014-08-31 03:38:14

爲了將來的參考，這個頁面顯示了一個更簡單的方法，使用'blockquote：after {content：no-close-quote}' - http://webdesign.tutsplus.com/articles/start-using-quotation-marks-the-正確的方式 - 網頁設計 - 16905]（http://webdesign.tutsplus.com/articles/start-using-quotation-marks-the-correct-way--webdesign-16905） – jtotheh 2015-09-01 15:45:11

@jtotheh謝謝分享，但鏈接似乎破了 – 2015-09-05 16:49:10

http://www.w3.org/TR/CSS21/generate.html#quotes-insert：

哪一對引號使用取決於引用的嵌套層次：「開放式報價」的出現的次數在所有生成的文本在當前事件發生之前，減去「close-quote」的發生次數。如果深度爲0，使用第一對，如果深度爲1，第二對使用等

既然你不使用close-quote在這裏，你的第二個你有一個在它之前出現open-quote，並且沒有出現close-quote - 表示深度爲1，因此使用您指定爲第二對的引號。（「嵌套」並不一定意味着這一定義嵌套元素。）

爲了解決這個問題，使用close-quote以及 - 和隱藏他們，如果你不想讓他們顯示：

blockquote:after { 
    content: close-quote; 
    visibility:hidden; /* to hide closing quote – don’t use display:none here, 
         because that would mean close-quote is absent again */ 
}

http://jsfiddle.net/yg7j5mkm/2/

來源

2014-08-31 03:37:38 CBroe

CSS開報價顯示1個引號

回答

相關問題