icicleking icicleking - 1 year ago 97
HTML Question

text line breaks in markup between elements

I have a bug that results from actual line-breaks in my html markup. I'm trying to find documentation that supports what I'm seeing. This does not have to do with

or CSS, but instead the newlines within the actual markup. Basically, this:

<h4 class="condensed-title-wrap">
<span class="condensed-title">Here is the title text</span>&nbsp;<i class="icon-icon-navigation-mobile-arrow-right"></i>

Renders differently than this:

<h4 class="condensed-title-wrap">
<span class="condensed-title">Here is the title text</span>
<i class="icon-icon-navigation-mobile-arrow-right"></i>

What I'm asking for is language and maybe some documentation that this is true.

Answer Source

The invisible carriage returns and line feeds that occur at the end of the lines count as whitespace (different from non-breaking whitespace such as &nbsp;). HTML requires that certain sequences of whitespace are condensed into a single space character. In your second example, the text breaks on the section just before &nbsp; which include the previous line break and leading spaces.

This is mentioned in several places in the spec, one of which is quoted here:

When a user agent is to strip and collapse whitespace in a string, it must replace any sequence of one or more consecutive space characters in that string with a single U+0020 SPACE character, and then strip leading and trailing whitespace from that string.

This issue is often seen when trying to get a pair of inline-block formatted elements to place side-to-side, instead ending up with a (often 4 pixel) gap between the elements.

This code produces such a gap:

  <span>left block</span>
  <span>right block</span>

While this code does not:

  <span>left block</span><span>
  right block</span>

The reason for the gap is the whitespace between the end of one span and the beginning of the next. The solution moves the whitespace from between the span elements to the beginning of a string where it is ignored rather than condensed.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download