html - 将 Blockquote 和 p 标签与引号结合起来

Question

CodePen 链接

我试图用字符包围我bockquote的 's 。"但是，对于以下所有 HTML 场景，我无法使其灵活地工作：

<blockquote>
  no p tag
</blockquote>

<blockquote>
  <p>one p tag should be on a new line</p>
</blockquote>

<blockquote>
  <p>one p tag should be on a new line</p>
  <p>two p tag should be on a new line</p>
</blockquote>

我一直在尝试的 SASS：

blockquote {
  quotes: "“" "”" "‘" "’";

  &:before {
    content: open-quote;
  }

  &:after {
    content: close-quote;
  }

  p {
    display: inline;
    // OR
    display: block;
  }
}

如果我使用display: inline，它可以工作，但是在有两个段落的情况下，我会丢失它们之间的换行符，并且两个段落都显示在一行上。

如果我使用display: block, 或display: inline-block, 我的段落现在用新行分隔，但引号字符也在新行上，而不是与段落文本一起流动。

我对 HTML 没有任何控制权。我想避免使用 JavaScript。这是我想看到的：

"no p tag"

"one p tag should be on a new line"

"one p tag should be on a new line
two p tag should be on a new line"

Answer 1

您可以考虑display:inline并使用以下另一种技术强制换行：

blockquote {
  border: 1px solid red;
  position: relative;
  font-size: 2em;
}

blockquote:before {
  content: open-quote;

}

blockquote:after {
  content: close-quote;
}

blockquote p {
  margin: 0;
  display:inline;
}
/* a line break between two P */
blockquote p + p::before {
  content:"";
  display:block;
}

<blockquote>
  no p tag
</blockquote>

<blockquote>
  <p>one p tag should be on a new line</p>
</blockquote>

<blockquote>
  <p>one p tag should be on a new line</p>
  <p>two p tag should be on a new line</p>
</blockquote>

<blockquote>
  <p>one p tag should </p>
  <p>two p tag should be on a new line</p>
  <p>two p a new line</p>
</blockquote>

Answer 2

考虑绝对定位

blockquote {
  border: 1px solid red;
  display: inline-block;
  position: relative;
  padding: 0 0.5em;
  font-size: 2em;
  margin: .5em;
}

blockquote:before,
blockquote:after {
  position: absolute;
}

blockquote:before {
  content: open-quote;
  left: 0;
  top: 0;
}

blockquote:after {
  content: close-quote;
  right: 0;
  bottom: 0;
}

blockquote p {
  margin: 0;
}

<blockquote>
  no p tag
</blockquote>

<blockquote>
  <p>one p tag should be on a single line</p>
</blockquote>

<blockquote>
  <p>one p tag should be on it's own line</p>
  <p>two p tag should be on a new line</p>
</blockquote>