0

我想使用 CSS 来格式化 ablockquote所以以下（没有 a <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>

4

1 回答 1

1

重置嵌套元素上的空白：

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

于 2021-05-10T14:24:03.570 回答