Объединение тегов Blockquote и p с цитатами

Question

Ссылка на CodePen

Я пытаюсь окружить свои bockquote символами ". Однако я не могу заставить это работать гибко для всех HTML сценариев ios ниже:

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