Open Bug 587438 Opened 9 years ago Updated Last year

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


(Core :: Layout: Tables, defect)

Not set




(Reporter: karl156, Unassigned)


(Blocks 1 open bug, )


(Keywords: css3, dev-doc-needed, testcase, Whiteboard: [css3-text])


(2 files)

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; de; rv: 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
Attached file Testcase
Version: unspecified → Trunk
Blocks: css-text-3
Ever confirmed: true
Keywords: css3, testcase
Whiteboard: [css3-text]
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?
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.
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."
Didn't we decide this aliasing was an awful idea? What happened? (bottom)
If anyone decided it was an awful idea, they didn't inform the CSSWG about it... afaik those resolutions are still in effect.
Blocks: 955857
"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;"
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:

Whereas Firefox 34 behaves like `break-all`:
Just got bit by this. It’s still broken in latest Firefox. Not aware of any other browser with this issue.
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:

In light of this, I suspect this is a WONTFIX.
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, the former was not defined in CSS, but it will be.
Duplicate of this bug: 1389039
Attached image firefox, safari, chrome
This is the rendering
Using the testcase

Chrome/Safari behaves the same.
Firefox renders the table with width in 1 column of 100px
I would say this is working now?
You need to log in before you can comment on or make changes to this bug.