如何在 < td > 中包装没有空格的文本？

Set a column width for the td tag.

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.

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

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/

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>

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.

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.

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.

What worked for me was:

.output {


overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;


}