[css-text-3] word-wrap/overflow-wrap: break-word should affect min-content

[fantasai]

See #2270 (comment) and #2390 //cc @Dan503

Right now word-wrap/overflow-wrap: break-word allows long words to wrap if they are too long to fit in the container, but in an auto-sized container, they will still force the container to grow. This is frustrating to authors. Issue 2390 is about adding a break-word value to word-break to address this feature (because WebKit/Blink happen to have implemented such a thing), but then we end up with two extremely similar-looking property-value pairs that do almost exactly the same thing except for this side-effect of how they influence the min-content size.

The number of line-breaking controls in CSS is already crazy confusing; we really don't need to have the similarity between word-wrap: break-word and word-break: break-word compounding the situation. Also I suspect that making the already-existing word-wrap: break-word influence min-content sizes is a reasonable thing to do regardless: it can't do its job of allowing breaking if the container is forced to fit the thing that it's trying to break anyway.

So the proposal is to make the existing word-wrap/overflow-wrap property affect intrinsic sizing and, hopefully, also close #2390 as no change.

[frivoal]

If we can do that, I am totally in support. But can we? Assessing web compat on this seems tricky.

I am reasonably convinced that anyone who intentionally combines overflow-wrap:break-word and shrinkwrapping (or some other sizing that depends on min-content) would be positively affected by this change, but it's the non intentional uses that I'm worried about.

[anjia]

So the proposal is to make the existing word-wrap/overflow-wrap property affect intrinsic sizing

Yeah, I agree with it because that's reasonable, and the behavior is logical in my opinion.

1. word-wrap/overflow-wrap affects the display effect of the text,
2. then the text affects the intrinsic sizing

As for the point ... but it's the non intentional uses that I'm worried about @frivoal mentioned, it's indeed a problem. But I think may be ... developers could forgive this change as they indeed wrote the word-wrap/overflow-wrap property which can affect the text ?

[frivoal]

@anjia authors who think about it would probably be fine. Existing pages which are already deployed, aren't maintained, and apply overflow-wrap:break-spaces to intrinsically sized things for no good reason might suddenly look weird, and users would be unhappy. I don't think that particular type of breakage is likely to be that common, but what we need to worry about is its effects on users, rather than on the mood of developers.

I think that most likely we'll be fine, and if so this is a great way out of the current mess.

[anjia]

but what we need to worry about is its effects on users, rather than on the mood of developers.

@frivoal yeah, you're right. This thought refreshes my responsibility as a csswg member. Thanks very much

[css-meeting-bot]

The Working Group just discussed word-wrap/overflow-wrap: break-word should affect min-content, and agreed to the following:

• RESOLVED: Accept the proposal in Issue #2682

The full IRC log of that discussion

<dael> Topic: word-wrap/overflow-wrap: break-word should affect min-content
<dael> github: https://github.com//issues/2682
<dael> fantasai: Issue is that...there's a number of cases where authors are fustrated with elements being bigger then they ought to be. Some are because they put overflow:scroll. Other set are related to I thought I told the text to be able to wrap if it needs to, why is element so big
<dael> fantasai: That's the word-wrap/overflow-wrap:break-word which doesn't effect min-content.
<dael> fantasai: There was discussion about word-break:break-word from webkit that does effect intrinisic size. We decided we wouldn't add that unless FF or Edge said they needed
<florian> q+
<dael> fantasai: proposal is to solve several things. Give the authors the behavior that they're expecting so content can shrink down in the way they expect since right now if you're auto sizing the width is too big to break. It also means we can address reasons for the other syntax existing without adding the other syntax.
<florian> q-
<dael> fantasai: Having the syntactic mess is an awful situation to get in.
<dael> florian: Cannonical example is when there is a piece of text in a table cell with a long word and the put the overflow-wrap:break-word and the word stays long.
<dael> fantasai: It's prob getting more frustrating because effects min-content in grid or flexbox. You put a URL in and say you can break, but it pushes out 1fr column for no good reason. It's not just in table cells. Flexbox and grid are relying on the min-content size.
<dael> florian: Overall if we can do this it's a good idea. Can we or do we break compat with negative effects? I'm not too pessimistic but want to make sure
<dael> fantasai: It's a concern in general, but I think there's enough cases where changing behavior gets authors to where they want more then it breaks. Cases that will break is when you set overflow-wrap to a place where it allows breaking but then you're not expecting a break.
<dael> fantasai: Most layouts aren't dependent on longest word. They asked for wrapping. I think more likely to fix then to break.
<dael> ??: Seems fair
<dael> Rossen: To be clear blink and webkit have this?
<dael> fantasai: Under a different syntax. We've pushed back on adding that syntax. Only difference between is how the effect intrinisic sizing. It's small but super confusing for authors. Even if they weren't syntactically similar it's still confusing to think in terms of intrinsic size
<dael> Rossen: word-wrap:break-word you take all breaking content?
<dael> fantasai: Just in min size
<dael> florian: word-break controls other things as well, so with word-break:break-word you can't do that. With this appoarch you could.
<dael> Rossen: Just wanted to clarify expectations
<dael> Rossen: Other opinions? Sounds reasonable way forward. Have to see what interop looks like
<dael> Rossen: Or compat risk rather
<dael> florian: Yeah
<dael> fantasai: Yeah
<dael> fantasai: Authors will be happy if we fix this. This is a major source of frustration with grid and flexbox. Sometimes allowing breaks...things get too big
<dael> Rossen: I'm with you.
<tantek> +1 [CSS is awe]some
<dael> Rossen: I'm mostly worried about older content in tables and whatnot out in the wild. All the sudden we introduce an adverse effect. But I'll let blink and webkit engineers spearhead since they have this behavior.
<dael> Rossen: Objections?
<dael> RESOLVED: Accept the proposal in Issue #2682

[frivoal]

I've made PRs for the spec and wpt:

• Spec PR
• WPT PR

[CShepartd]

@fantasai
It will pass test? https://jsfiddle.net/ofgd83um/53/

[fantasai]

@CShepartd That test doesn't have a pass condition, but what should happen is that the Box 6 will have the same width as Box 2. (The word-break: break-word declaration for 4 would be invalid, so it will render the same as 1.)

[fantasai]

(Note that overflow-wrap and word-wrap are the same property--they enable breaking when it's not “normal” if the text won't fit otherwise--so either one will work. But word-break won't because that's a different property.)

[CShepartd]

overflow-wrap: anywhere solving very well problem of missing word-break: break-word https://jsfiddle.net/ofgd83um/80/