html – CSS open-quote显示1个引号

发布时间：2020-12-14 23:43:03 所属栏目：资源来源：网络整理

导读：我正在使用以下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;} 当我

我正在使用以下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/

解决方法

您必须在打开另一个之前关闭报价.

这里有一个解决方法：关闭引号,但不可见.

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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!