How do I wrap text with no whitespace inside a <td>?

Question

I've used:

word-break:break-all;
table-layout:fixed;

and the text wraps in Chrome but not Firefox.

Update: I decided to change the design so it didn't need the wrap; trying to sort out a CSS fix/hack was proving too frustrating and time consuming.

Answer 1

Try this, I think this will work for something like "AAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGGGGG" will produce

AARRRRRRRRRRRRRRRRRRRR
RRGGGGGGGGGGGGGGGGGGGG
G

I have taken my example from a couple different websites on Google. I have tested this on ff 5.0, IE 8.0, and Chrome 10.

.wrapword {
    white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
    white-space: -webkit-pre-wrap;          /* Chrome & Safari */ 
    white-space: -pre-wrap;                 /* Opera 4-6 */
    white-space: -o-pre-wrap;               /* Opera 7 */
    white-space: pre-wrap;                  /* CSS3 */
    word-wrap: break-word;                  /* Internet Explorer 5.5+ */
    word-break: break-all;
    white-space: normal;
}

<table style="table-layout:fixed; width:400px">
    <tr>
        <td class="wrapword">
        </td>
    </tr>
</table>

Answer 2

Here is advanced version of what OP asked.

Sometimes, what happens is that, our client wants us to give '-' after word break to end of line.

Like

AAAAAAAAAAAAAAAAAAAAAAABBBBBBBBBBB

break to

AAAAAAAAAAAAAAAAAAAAAAA-
BBBBBBBBB

So, there is new CSS property if supported, usually supported in latest browsers.

.dont-break-out {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}

I am using this one.

I hope somebody will have demand like this.

Answer 3

For an automatic table layout try to style the concerned td combining the attributes max-width and word-wrap.

Eg: <td style="max-width:175px; word-wrap:break-word;"> ... </td>

Tested in Firefox 32, Chrome 37 and IE11.

Answer 4

You can manually inject zero width spaces (&#8203;) to create break points.