When using white-space: pre-line on non-block elements, Chrome, Opera and Safari (I suspect WebKit- and WebKit-derivative-based browsers) seem to stretch the element to seemingly fit the whitespace, which I believe they are supposed to collapse.
div
{
white-space: pre-line;
display: inline-block;
border: solid 1px #333;
}<!-- deep inside the document, on the 20th indentation level -->
<div>single line</div>
<div>multi
line</div>
<div>multi
line
</div>
<div>crazy
indentation
</div>In Chrome, Opera and Safari the above code produces:
While in Firefox, it turns up (somewhat) as I would expect it to:
Interestingly, this seems to determined only by the length of the last line of the element:
div
{
white-space: pre-line;
display: inline-block;
border: solid 1px #333;
}<!-- deep inside the document, on the 20th indentation level -->
<div>multi
line
</div> <!-- last line has 0 characters -->According to my understanding of the specification, white-space: pre-line is supposed to collapse multiple consecutive spaces (and tabs) into at most a single character.
This seems to be happening to some extent, as there is no whitespace to be selected with the mouse in the boxes in the first example.
However, the box model seems to treat the last line of its content as if white-space: pre had been applied.
- Is this a bug in the WebKit engine, or is there some obscure reason for which this is allowed, or even supposed to be happening?
- There are at least two HTML workarounds (use
<br>or remove indentation), but I'd rather leave my markup readable. So is there a CSS-only way to "fix" the box width?
