How do I wrap text with no whitespace inside a <td>?
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.
Solution 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>
Solution 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.