CODEWITHSUNDEEP
csshtmlfirefox
Jeanluca Scaljeri
Jeanluca Scaljeri

Reputation: 29149

Weird line-break in span

For some reason, the following HTML snippet wraps the % sign onto a new line (FireFox only):

<span class="label">
    <input type="radio" />
    <span>
        <span>1,22</span>
        <span>%</span>
        <br />
   </span>
</span>

And css:

.label {display: inline-block;}

enter image description here

Its a snippet, so it doesn't make much sense on its own, but I don't understand why this is happening, I think its valid HTML5. Can someone explain what the problem is with this snippet, because it works in Chrome and not in FireFx ?

DEMO

Upvotes: 3

Views: 2089

Answers (3)

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

Firefox renders this incorrectly.

Inline blocks should use the shrink-to-fit algorithm:

calculate the preferred width by formatting the content without breaking lines other than where explicit line breaks occur,

calculate the preferred minimum width, e.g., by trying all possible line breaks.

find the available width: in this case, this is the width of the containing block minus the used values of 'margin-left', 'border-left-width', 'padding-left', 'padding-right', 'border-right-width', 'margin-right', and the widths of any relevant scroll bars.

Then the shrink-to-fit width is:

min(max(preferred minimum width,available width), preferred width)

In this case:

  1. preferred width is the width without any word wrapping.
  2. preferred minimum width is the width of the widest element, in this case "1,22."
  3. available width is the width of the document body, in this case 100%.

min(max(preferred minimum width,available width), preferred width) should therefore be equal to preferred width.

You can fix Firefox's behavior by changing your HTML or by using white-space:nowrap.

But I have another alternative: br is an inline element, but changing it to a block element fixes the problem.

Doing so shouldn't have an impact on any other br elements in your HTML (that I can think of).

Fiddle

Upvotes: 1

gaynorvader
gaynorvader

Reputation: 2657

What's happening is Firefox is interpreting your second span as being inline with the <br/> element. Try putting the <br/> element outside of the span wrapping the 2 spans like so:

<span class="label">
    <input type="radio" />
    <span>
      <span>1,22</span>
      <span>%</span>

    </span>
    <br />
</span>

http://jsfiddle.net/gc0sq29k/12/

Upvotes: 1

j08691
j08691

Reputation: 207923

Adding white-space:nowrap; should fix it:

.label {
    background-color: yellow;
    display: inline-block;
    white-space:nowrap;
}

jsFiddle example

Upvotes: 3

Related Questions