Re: [css-text] Differences in white-space:pre-wrap behavior

On Wed, Nov 6, 2013 at 9:35 AM, Christopher Palmer (BLOOMBERG/ 731
LEXIN) <cpalmer18@bloomberg.net> wrote:
> Hello everybody,
>
> I'm currently using "white-space: pre-wrap" in a project and noticed that
> there are some fairly significant differences in how browsers are
> interpreting it.
>
> I put together a simple example (code below) that take a div of an explicit
> width and then put a span inside containing various text content that would
> be wider than its parent. The output between IE, Firefox, and Chrome is
> completely different. The results also differ between the browsers (in other
> interesting ways) if you vary whether the inner span is display:inline or
> display:inline-block.
>
> I'm curious what the correct behavior is. Thanks,
> -Chris
>
> http://jsfiddle.net/PjFF3/

As far as I can tell, Firefox's behavior is correct.

Note that the relevant distinction between the first and the second
example isn't actually the newline; it's the presence of multiple
words, and thus actual break opportunities.  You can remove the
newline from the second and get identical results, or add a second
word to the first and get similar wrapping behavior.  The fact that
the newline causes distinct behavior in Chrome is crazy times.

Similarly, you'll notice that in FF the inline-block examples are
identical to the inline examples, except that the span's background
fills the whole element.  The behavior of the last example in FF is
because of the line-wrap, which causes the inline-block to expand to
fill the whole line in the div.

~TJ

Received on Wednesday, 6 November 2013 19:16:13 UTC