Question

我正在使用以下CSS在段落前添加开放引号：

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/

Answer 1

您必须在打开另一个之前关闭引号。

这是一个解决方法：关闭引号，但不可见。

＆＃13;

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;
  content: close-quote;
}

＆＃13;

<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>

＆＃13;

Answer 2

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

使用哪一对引号取决于引号的嵌套级别：＆quot; open-quote＆＃39;的出现次数。在当前出现之前的所有生成的文本中，减去＆quot; close-quote＆＃39;的出现次数。如果深度为0，则使用第一对，如果深度为1，则使用第二对，等等。

由于您未在此处使用close-quote，因此对于您的第二个blockquote，您的<{1>}出现一个，而open-quote都没有close-quote } - 意思是，深度为1，因此使用您指定为第二对的引号。（“嵌套”并不一定意味着此定义的嵌套blockquote元素。）

要解决此问题，请同时使用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/

Answer 3

在blockquote:after中，您将content设置为no-close-quote：

blockquote:after {
  content: no-close-quote
}

这是一个片段：

＆＃13;

  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;
  }
  
  /* Add this */
  blockquote:after {
      content: no-close-quote;
  }

＆＃13;

<blockquote>
    <p style="display:inline;">Blockquote 1</p>
</blockquote>
<blockquote>
    <p style="display:inline;">Blockquote 2</p>
</blockquote>

＆＃13;

Answer 4

为什么不呢？

content: '\201C';

它不是语义，但指定quotes:规则会覆盖任何l10n，无论如何。

CSS open-quote显示1个引号

4 个答案: