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

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 (​) to create break points.

Answer 5

Set a column width for the td tag.

Answer 6

What worked for me was:
.output {
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
}

Answer 7

I think this is a long standing issue in Firefox, that harks back to Mozilla and Netscape. I'll bet you were having the issue with the display of long URLs. I think it is an issue with the rendering engine rather than something you can fix with CSS, without some ugly hacks.
Makes sense to change the design.
This looked hopeful though: http://hacks.mozilla.org/2009/06/word-wrap/

Answer 8

I'm using Angular for my project, and managed to solve this with a simple filter:
Template:
<td>{{string | wordBreak}}</td>
Filter:
app.filter('wordBreak', function() {
return function(string) {
return string.replace(/(.{1})/g, '$1​');
}
})
You can't see it, but after $1 there is an invisible space (thanks #kingjeffrey for the tip), which enabled word breaks for table cells.

Answer 9

One slightly hackish way of doing this is by processing the text to add space between each letter. Replace spaces with Then use the letter-spacing css attribute to bring the spaces down.
I know, it's a hack... but if NOTHING else works, it should wrap without problem.