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>
reset the white-space on the nested element: