如何尊重 HTML 块引用中的新行但在列表中使用单行间距？

Question

我想用CSS格式化一个blockquote，所以下面的（没有<br>）将全部出现在单独的行：

<blockquote>
  Line #1
  Line #2
  <p>
    Line #3
    Line #4
  </p>
</blockquote>

...但以下将仅使用单行距：

<blockquote>
  <ul>
    <li>Item #1</li>
    <li>Item #2</li>
  </ul>
</blockquote>

如何做到这一点？请参阅以下显示问题的演示（例如，尝试 white-space: pre-wrap 时）：

<html>
  <style>
    .bq-common {
      background: #f9f9f9;
      border-left: 10px solid #ccc;
      margin: 1.5em 10px;
      padding: 0.5em 10px;
    }
    .bq1 {
      white-space: normal;
    }
    .bq2 {
      white-space: pre-wrap;
    }
  </style>

  <blockquote class="bq-common bq1">
    Line #1
    Line #2
    <p>
      Line #3
      Line #4
    </p>
    <ul>
      <li>Item #1</li>
      <li>Item #2</li>
    </ul>
  </blockquote>

  <blockquote class="bq-common bq2">
    Line #1
    Line #2
    <p>
      Line #3
      Line #4
    </p>
    <ul>
      <li>Item #1</li>
      <li>Item #2</li>
    </ul>
  </blockquote>
</html>

Answer 1

重置嵌套元素上的白色-space:

.bq-common {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
}

.bq2 {
  white-space: pre-wrap;
}
.bq2 ul, .bq2 ol {
  white-space: normal;
}

<blockquote class="bq-common bq2">
  Line #1
  Line #2
  <p>
    Line #3
    Line #4
  </p>
  <ul>
    <li>Item #1</li>
    <li>Item #2</li>
  </ul>
</blockquote>

如何尊重 HTML 块引用中的新行但在列表中使用单行间距？

How to respect new lines in an HTML blockquote but use single-line spacing in lists?

html

css

html-lists

blockquote