587438 - word-wrap:break-word does not work in tables

Status: RESOLVED WONTFIX

(Core :: Layout: Tables, defect)

Description

[karl155]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; de; rv:1.9.2.8) Gecko/20100722 Firefox/3.6.8
Build Identifier: Mozilla/5.0 (Windows NT 5.1; rv:2.0b4pre) Gecko/20100812 Minefield/4.0b4pre

See Testcase

Reproducible: Always

Comment 1

[karl155]

Attachment: Testcase

Comment 2

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Does this work in other browsers?

If so, if you add an explicit 'width: 0' to the table, does the table end up one letter wide?

Comment 3

[karl155]

The only one I know is, that Opera changed their behavior in 10.50 that this works correctly.

'width:0' does not work. After a short try I had to set at least 'width:13px' for the table to get any effect. If I take a shorter word (max 142 chars) this also works with 'width:1px' in Opera.

IE8 and Iron 4 show the same behavior as Firefox. I have not tested IE9 or Webkit nightly builds.

Comment 4

[[Baboo]]

Word-wrap is overflow-wrap now.
"For legacy reasons, UAs may also accept ‘word-wrap’ as an alternate name for the ‘overflow-wrap’ property. However this syntax non-conforming in author style sheets."
http://dev.w3.org/csswg/css3-text/#overflow-wrap

Comment 5

[:Ms2ger (he/him; ⌚ UTC+1/+2)]

Didn't we decide this aliasing was an awful idea? What happened?

Comment 6

[fantasai]

http://www.w3.org/blog/CSS/2011/08/06/resolutions_174/
http://www.w3.org/blog/CSS/2012/02/19/resolutions-24/ (bottom)
If anyone decided it was an awful idea, they didn't inform the CSSWG about it... afaik those resolutions are still in effect.

Comment 7

[Karl Dubost💡 :karlcow]

"word-wrap: break-word;"

                    table-cell   block
* Opera (P) 12.16   working      working
* Safari    7.0.1   working      working
* Firefox   27      NOT working  working

When working, it behaves like a "word-break: break-all;"

Comment 8

[Karoun Kasraie]

This bug also applies to CSS layouts that use `display: table`.

The relevant styles are: `white-space: pre-wrap; word-wrap: break-word;`

Chrome 39 renders the content as expected: http://i.imgur.com/MPPSrj9.png

Whereas Firefox 34 behaves like `break-all`: http://i.imgur.com/eHYvkQv.png

Comment 9

[jondallas]

Just got bit by this. It’s still broken in latest Firefox. Not aware of any other browser with this issue.

Comment 10

[Thomas Wisniewski]

I just tested in Chromium 49 and today's Firefox nightly, and both now render the testcase on this bug similarly (for both the given test, and when table-layout:fixed is used on the table).

According to a similar bug report on Chromium's end, this is intentional, and they expect authors to use table-layout:fixed to get break-word working in table cells: https://bugs.chromium.org/p/chromium/issues/detail?id=155767

In light of this, I suspect this is a WONTFIX.

Comment 11

[Koji Ishii]

BTW, this test case is better supported by
  word-break: break-word;
rather than:
  word-wrap: break-word;
The former does not expand container. See https://crbug.com/492202, the former was not defined in CSS, but it will be.

Comment 13

[Karl Dubost💡 :karlcow]

Attachment: firefox, safari, chrome

This is the rendering
Using the testcase https://bugzilla.mozilla.org/attachment.cgi?id=466097

Chrome/Safari behaves the same.
Firefox renders the table with width in 1 column of 100px

Comment 14

[Karl Dubost💡 :karlcow]

I would say this is working now?

Comment 15

[BugBot [:suhaib / :marco/ :calixte]]

The severity field for this bug is relatively low, S3. However, the bug has 10 votes.
:dholbert, could you consider increasing the bug severity?

For more information, please visit auto_nag documentation.

Comment 16

[BugBot (nomail) [:suhaib / :marco/ :calixte]]

The last needinfo from me was triggered in error by recent activity on the bug. I'm clearing the needinfo since this is a very old bug and I don't know if it's still relevant.

Comment 17

[Master ? [:masterquestionable]]

= Text wrapping unbreakable texts in "<table>" has incorrect width assumption =

    Derived from: https://util.unicode.org/UnicodeJsps/character.jsp?a=%23
    Test case:
[[

<body style="word-wrap: break-word; border: 1px solid">
<table><tr>
	<td style="background-color: #ff9bce; word-wrap: break-word">af,as,ast,az,bgc,bho,bn,brx,ca,ccp,ce,ceb,chr,cv,cy,da,de,doi,dsb,dz,ee,en,es,eu,fi,fil,fo,fr,fy,ga,gd,gl,gu,gv,hi,hi-Latn,hsb,hu,ia,id,ii,is,ja,ka,kea,kgp,kk,kn,ko,kok,ks,ksh,ku,ky,lb,lij,lkt,lo,lv,mai,ml,mn,mni,mr,ms,my,nb,nds,nl,nn,no,oc,or,os,pcm,pl,pt,qu,raj,ru,sa,sc,sd-Deva,si,so,sq,sr,su,sv,szl,ta,tg,th,tk,to,tr,tt,uz,vi,vmw,xh,yo,yrl,yue,yue-Hans,za,zh,zh-Hant</td>
	<td style="background-color: #a5d6ff">af,as,ast,az,bgc,bho,bn,brx,ca,ccp,ce,ceb,chr,cv,cy,da,de,doi,dsb,dz,ee,en,es,eu,fi,fil,fo,fr,fy,ga,gd,gl,gu,gv,hi,hi-Latn,hsb,hu,ia,id,ii,is,ja,ka,kea,kgp,kk,kn,ko,kok,ks,ksh,ku,ky,lb,lij,lkt,lo,lv,mai,ml,mn,mni,mr,ms,my,nb,nds,nl,nn,no,oc,or,os,pcm,pl,pt,qu,raj,ru,sa,sc,sd-Deva,si,so,sq,sr,su,sv,szl,ta,tg,th,tk,to,tr,tt,uz,vi,vmw,xh,yo,yrl,yue,yue-Hans,za,zh,zh-Hant</td>
</tr></table>
	af,as,ast,az,bgc,bho,bn,brx,ca,ccp,ce,ceb,chr,cv,cy,da,de,doi,dsb,dz,ee,en,es,eu,fi,fil,fo,fr,fy,ga,gd,gl,gu,gv,hi,hi-Latn,hsb,hu,ia,id,ii,is,ja,ka,kea,kgp,kk,kn,ko,kok,ks,ksh,ku,ky,lb,lij,lkt,lo,lv,mai,ml,mn,mni,mr,ms,my,nb,nds,nl,nn,no,oc,or,os,pcm,pl,pt,qu,raj,ru,sa,sc,sd-Deva,si,so,sq,sr,su,sv,szl,ta,tg,th,tk,to,tr,tt,uz,vi,vmw,xh,yo,yrl,yue,yue-Hans,za,zh,zh-Hant

]]
    "word-wrap: break-word" ("overflow-wrap: break-word") doesn't work intended.
    "overflow-wrap: anywhere" ("word-break: break-word") works though.

Comment 18

[Master ? [:masterquestionable]]

    The issue is not Firefox-exclusive: affects Chrome too.

Comment 19

[Daniel Holbert [:dholbert]]

(In reply to Thomas Wisniewski from comment #10)

I just tested in Chromium 49 and today's Firefox nightly, and both now
render the testcase on this bug similarly
[...]
In light of this, I suspect this is a WONTFIX.
(In reply to Karl Dubost💡 :karlcow from comment #14)
I would say this is working now?

Yup, I think we're good here, and I agree we should WONTFIX. In particular:

• Firefox's behavior today matches Firefox's behavior as of Nightly 2011-01-01 (approximately when this was filed).
• Other browser engines (Chromium and WebKit) match us at this point.
• The one thing that we were doing differently in comment 13's screenshot (which I can reproduce in Nightly 2018-08-16) seems to have been a temporary issue that's been fixed in more recent builds.

I suspect the lack-of-text-wrapping-in-the-table-sizing here arises out of some specialized/quirky behavior of word-wrap (per comment 11) and/or tables; not sure about the exact details, and it's perhaps weird, but it's good that things are interoperable, and that there's an alternate bit of CSS (word-break: break-word) that's designed a bit more recently/intentionally and interoperably produces the desired result.

(In reply to Master ? [:masterquestionable] from comment #17)

= Text wrapping unbreakable texts in "<table>" has incorrect width assumption =
[...]
    "word-wrap: break-word" ("overflow-wrap: break-word") doesn't work intended.
    "overflow-wrap: anywhere" ("word-break: break-word") works though.
(In reply to Master ? [:masterquestionable] from comment #18)
    The issue is not Firefox-exclusive: affects Chrome too.

Firefox, Chrome, and Safari all render the testcase from comment 17 the same; I suspect it is the same issue described in this bug (so: good that you posted here), and I think your note comparing of word-wrap vs. word-break matches comment 11 here.

Unless there were an agreed-upon standards-based resolution to change behavior here (with browsers agreeing to do something different from what we interoperably do now), I don't think we're going to spend time doing something different & breaking compatibility/interoperability on this point. Hence: --> WONTFIX.