断词不适用于单个长词

Question

In a table where a width size 97% is given, and a long single word like,

<td style="word-wrap: break-word;">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</td>

is added to a table cell where word wrap is set to break-word won't break the word. It goes past the set 97% width of the table.

Here is the JSFiddle of the problem, where two tables are created with the same styles but one table with a cell that has a single long word and the other with a paragraph with spaces.

http://jsfiddle.net/E5b52/

Does anybody know how to solve this?

EDIT - Note that a FIXED WIDTH cannot be given to the tabled cell.

Answer 1

Try this instead:

.table-cell {
    display:table-cell;
    word-break:break-all;
    padding:5px;
}

http://jsfiddle.net/E5b52/4/

Answer 2

You should use word-break: break-all;

Check updated demo

Answer 3

Use the following CSS property:

white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
white-space: -pre-wrap;      /* Opera 4-6 */
white-space: -o-pre-wrap;    /* Opera 7 */
white-space: pre-wrap;       /* css-3 */
word-wrap: break-word;       /* Internet Explorer 5.5+ */
word-break: break-all;
white-space: normal; 

You should try this:

.table-cell {
  display:table-cell;
  padding:5px;
  white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  white-space: pre-wrap;       /* css-3 */
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
  word-break: break-all;
  white-space: normal;    
}

Working Example