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

Question

I would like to use CSS to format a blockquote so the following (without a <br>) will all appear on separate lines:

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

...but the following will only use single-spaced lines:

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

How can this be done? Please see the following demo showing the issue (e.g. when trying 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>

Can you adjust the markup at all or does the solution have to be solely CSS? — Sean, May 10 '21 at 14:21
Unfortunately it would have to be CSS I think - the HTML actually originates from markdown files, which can be created by and uploaded users and are converted into HTML by [gatsby-transformer-remark](https://www.gatsbyjs.com/plugins/gatsby-transformer-remark/). — Steve Chambers, May 10 '21 at 14:24

score 1 · Accepted Answer · edited May 10 '21 at 15:40

1

reset the white-space on the nested element:

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

edited May 10 '21 at 15:40

Steve Chambers

37,270
24
156
208

answered May 10 '21 at 14:24

Temani Afif

245,468
26
309
415

Thanks for the answer - it does perfectly answer the original question. But turns out I had over-simplified - the lines part can actually occur within a `
` element. (Seems overkill to post a new SO question just for this small change so I've now edited the question.)
– Steve Chambers May 10 '21 at 14:45
@SteveChambers reset only for the ul then `.bq2 ul` ? – Temani Afif May 10 '21 at 14:50
Sounds a good plan, maybe also `ol` and possibly others too - how would I OR them together using that syntax? – Steve Chambers May 10 '21 at 14:59
1

@SteveChambers `.bq2 ul,.bq2 ol {}` – Temani Afif May 10 '21 at 15:01

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

1 Answers1