Both of these divs render the same. Why is the leading newline rendered but not the trailing newline (in the second div)? I read the Line Breaking and Word Boundaries section in the CSS3 spec but it doesn’t explain this behavior.
.pre {
white-space: pre;
border: 1px solid red;
margin-bottom: 10px;
}<div class="pre">
hello
world</div>
<div class="pre">
hello
world
</div>3
Why? Well, to avoid compatibility problems, apparently.
The W3C says:
In order to avoid problems with SGML line break rules and inconsistencies among extant implementations, authors should not rely on user agents to render white space immediately after a start tag or immediately before an end tag.
and also:
Note that the white space processing rules have already removed any tabs and spaces after the segment break before these checks [on the value of the white-space property] take place.
Now it is not clear exactly which inconsistencies would be introduced if the browsers were allowed to keep the whitespace before the end tag, but there you have it.
2
Because the last n won’t work. And the property white-space: pre works as it’s called. It only adds newline before a word. The last n is not recognized as a word.
2