1474732 - white-space: nowrap in :before does not prevent wrap for images

Status: RESOLVED DUPLICATE of bug 1473813

(Core :: Layout, defect, P3)

Description

[Patrick Westerhoff]

When trying to add an image in front of an element with the `:before` pseudo element, using `white-space: nowrap` to prevent a line break does not work. The image should stick to the beginning of the content and not wrap on its own.

Try the following example (see a working example: http://jsfiddle.net/0jdr73c8/2/)

  <div class="wrapper">
    <div class="item">Foo bar baz</div>
  </div>

With the following CSS:

  .wrapper {
    width: 10px; /* Force line breaks */
  }

  .item:before {
    white-space: nowrap;
    content: url('…');
  }

Here, the image should be displayed in front of the “Foo”. Instead what happens is that the image is rendered on its own line, and “Foo” starts separately in the next line.

In both Chrome and Edge, the image is being displayed on the same line as the “Foo”. Only Firefox ignores the `white-space: nowrap` there.

Comment 1

[Daniel Holbert [:dholbert]]

Thanks for the bug report. Interesting that there's disagreement between browsers on this scenario.

Question: shouldn't your setup be identical to the following variant, where I've replaced the :before with an explicit <img>:
  https://jsfiddle.net/0jdr73c8/5/
(and I gave the img "white-space:nowrap", just like the original testcase does here for the :before-generated image)

In this variant, browsers agree that there is a linebreak between the image and "Foo" (tested Firefox, Chrome, and Edge).  What's special about the :before scenario that should make it different?

Comment 2

[Emilio Cobos Álvarez (:emilio)]

If this is nightly-only chances are this will be fixed by bug 1473813.

Comment 3

[Emilio Cobos Álvarez (:emilio)]

Yeah, wrapping it in a span with white-space: nowrap prevents the newline from getting inserted, this is bug 1473813. Please undo this if I got it wrong though :)

Comment 4

[Patrick Westerhoff]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #3)
> Yeah, wrapping it in a span with white-space: nowrap prevents the newline
> from getting inserted, this is bug 1473813.

Cool! That’s great to hear, thanks a lot! It’s also good to know that this is Nightly-only :)



(In reply to Daniel Holbert [:dholbert] from comment #1)
> What's special about the :before scenario that should make it different?

To be honest, I have no idea what the correct behavior according to spec would be. I just happened to look for this functionality when I found a solution that didn’t work in Firefox while it worked in other browsers. So I thought I would report this to at least point out the deviation from other implementations. If this had ended up with an answer “this works as specified, and Firefox is doing the correct thing here” then I also would have been happy with that resolution :)

But it seems that the :before content is indeed supposed to work differently. That’s good to know, and very nice to see that this is already being worked on!

Thank you all!