Join GitHub today
GitHub is home to over 36 million developers working together to host and review code, manage projects, and build software together.Sign up
[css-text-3] word-wrap/overflow-wrap: break-word should affect min-content #2682
The number of line-breaking controls in CSS is already crazy confusing; we really don't need to have the similarity between
So the proposal is to make the existing
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.
referenced this issue
May 19, 2018
Yeah, I agree with it because that's reasonable, and the behavior is logical in my opinion.
As for the point
@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.
The Working Group just discussed
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
<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.
<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
referenced this issue
Jun 6, 2018
referenced this issue
Jun 6, 2018
referenced this issue
Jun 19, 2018
I don't think
Is the goal with this new syntax to only set
I think it would be best to go with some sort of syntax that only does the one thing of setting the width of
Somewhere someone mentioned that authors do today:
word-break: break-all; word-break: break-word;
so they can get at least
In summary, I think the best thing to do is to add a new value to
This has the following advantages:
The alternative would be to specify the existing proprietary
And if the compat situation is really bad (I think it might not be, given that Firefox and Edge have managed to resist the temptation to implement so far), we should probably just do both.
The CSS Working Group just discussed
The full IRC log of that discussion<heycam> Topic: word-wrap/overflow-wrap: break-word should affect min-content
<heycam> github: https://github.com//issues/2682
<astearns> (summary: https://github.com//issues/2682#issuecomment-431503466 )
<heycam> florian: we have 2 things. we have overflow-wrap:break-word
<heycam> ... which says that if the line is too long, apply line breaking, if it still doesn't fit, break anywhere
<heycam> ... it doesn't affect intrinsic size
<heycam> ... if you have text in a table cell that says if i'm too long wrap anywhere, because teh table cell is sized to the intrinsic size
<heycam> ... same thing in flex boxes and some other situations
<heycam> ... we should have had overflow-wrap:break-word affect intrinsic size
<heycam> ... Mozilla found it's not web compatible to do that
<heycam> ... WebKit an Chrome have that switch, which doesn't the same thing as overflow-wrap:break-word plus intrinsic sizing, but it's on the wrong property
<heycam> ... the word-wrap property
<heycam> ... so there is some web compat pressure, but not an overwhelming amount, since even tho we've been talking about this for a while, both Edge and Firefox have resisted implementing it
<heycam> ... given that overflow-wrap:break-word should have done the right thing, we should add a new value that does so
<heycam> ... overflow-wrap:anywhere
<heycam> ... we already have an anywhere value in another overflow property
<heycam> ... line-break:anywhere allows it all the time, overflow-wrap:anywhere is only if you need to break
<heycam> ... maybe that will be enough and the web will slowly learn to use that rather than the WebKit thing
<heycam> ... if it turns out not to be the case, we should have both, rather than just breaks the property that otherwise makes sense
<heycam> eae: I agree with that
<fantasai> s/that/that, it makes sense to spec the right behavior and we would support that/
<heycam> florian: I propose we resolve on adding overflow-wrap:anywhere, we don't resolve on word-break:break-word, but only come back to that if web compat forces us to
<heycam> RESOLVED: Add an anywhere keyword to overflow-wrap
<heycam> myles: are overflow-wrap / word-wrap no longer going to be synonyms?
<heycam> Rossen: no they are