HTML breaks vs CRLF

by Manuel Souto Pico

HTML

<h1>Sorted from less to more preferable</h1>


<h2>HTML breaks (4 segments)</h2>

<div>Some books should be tasted<br/>some devoured,<br/>but only a few<br/>should be chewed and digested thoroughly.</div>

<hr/>

<h2>Spans (1 segment)</h2>
<div class="quote">
   <span>Some books should be tasted</span><span>some devoured,</span><span>but only a few</span><span>should be chewed and digested thoroughly.</span>
</div>

<hr/>

<h2>Break standalone spans (1 segment)</h2>
<div>Some books should be tasted<span class="break" />some 
devoured,<span class="break" />but only a few<span class="break" />should 
be chewed and digested thoroughly.</div>

<hr/>

<h2>Break span pairs (1 segment)</h2>
<div>Some books should be tasted<span class="break"></span>some 
devoured,<span class="break"></span>but only a few<span class="break"></span>should 
be chewed and digested thoroughly.</div>


<hr/>

<h2>Carriage returns and/or line feeds (1 segment)</h2>

<div class="poem">Some books should be tasted
some devoured,
but only a few
should be chewed and digested thoroughly.</div>

CSS

.poem {
  white-space: pre-wrap;
}

.quote > span {
  display: block;
}

.break {
    display: block;
}