codepen.io - Text is wrapped

[msssk]

URL: https://codepen.io/msssk/pen/qBbzRqr

Browser / Version: Firefox 79.0
Operating System: Windows 10
Tested Another Browser: Yes Chrome

Problem type: Design is broken
Description: Items not fully visible
Steps to Reproduce:
In Chrome the line is wrapped at wbr as expected since wbr is an HTML element, not text content.
In Firefox the line is not wrapped at all due to the CSS white-space:nowrap property being unreasonably applied to non-text content.

Browser Configuration

• None

From webcompat.com with ❤️

[softvision-oana-arbuzov]

Thanks for the report, I was able to reproduce the issue.

Tested with:
Browser / Version: Firefox Nightly 81.0a1 (2020-07-29)
Operating System: Windows 10 Pro

Moving to Needsdiagnosis for further investigation.

[wisniewskit]

There has been quite a bit of discussion about this, but I cannot quite tell if this is considered an actual interop issue or not. @frivoal, you mentioned that Blink's behavior is web compatible. Would you judge that this is an interop issue where Webkit/Blink's method is more web compatible?

[msssk]

I want to be able to create a layout that has somewhat dynamic line wrapping, but only at spots I specify. It is very nice that I can do this in Chrome with a combination of white-space: nowrap and wbr.

In Firefox and other browsers the only way I can imagine accomplishing this (haven't tested, I'm happy to just use what works which is Chrome) is to replace most space characters with a different character that is treated as non-whitespace but renders as whitespace, and then using a regular space where I want a line break to optionally occur. This is messy.

It's unfortunate Firefox has decided to ignore this for ~10 years. You can argue all day about the spec, but this is a use case that currently only Chrome has a good solution for, so I just avoid other browsers and tell users to install Chrome.

[wisniewskit]

@msssk, if you don't mind changing the way you mark things up, you could also do something like this:

<style>
.nowrap > * {
  display:inline-block;
  white-space:nowrap;
}
</style>
<div class="nowrap">
  <span>line 1</span>
  <span>line 2</span>
  <span>line 3</span>
</div>

At least it's how I've been dealing with this case.

[msssk]

@wisniewskit thanks, much appreciated! It's good to know this can be achieved cross-browser. I still much prefer the <wbr> solution that only works in Chrome, and it seems reasonable to me that white-space: nowrap should only apply to text content, not to HTML elements, which is how Chrome treats it which allows <wbr> to introduce wrapping opportunities.

My original codepen was the simplest test to demonstrate the issue, this codepen is more representative of my actual use-case and also happily demonstrates that your solution works in Firefox.

[wisniewskit]

@msssk, thanks! I don't have any reason to disagree with your assessment on wbr+nowrap, I'm just not an expert on this stuff. In my direct experience trying to resolve XMLHttpRequest interop issues, what seems trivial often has layers of complexity that no one would sanely expect until you try to fix it, and find out the web is using things in unexpected ways (let alone all the hidden complexity with how all the parts of CSS interoperate).

That's why I'd rather get input from the domain experts first, even if I feel wbr+nowrap seems reasonable. The more folks use it before everyone agrees on it, the harder it would be to change Blink and WebKit's behavior, should there be a compelling reason to do that instead of changing Firefox to match them. It's always a bit sad when we have to standardize on something sub-optimal or outright buggy, because too much of the web has come to rely on it behaving that way.

[frivoal]

I agree that the Chrome behavior is more desirable. Whether the specs say so is a harder question: css-text-3 alone doesn't fully answer the question, because it doesn't define the behavior of html elements (as it expects the html spec to do that). It does define that white-space is a property that applies to inlines, so having an child element with white-space:normal introduce a line break inside a parent with white-space:pre is certainly supported.

But it's up to HTML to define whether <wbr> actually does that or not. whatwg/html#2291 and whatwg/html#2298 are the right place to get a conclusion on that.

[karlcow]

Duplicate of the whatwg bugs