I was just Googling the same issue, and posted my final solution HERE. It's relevant to this question too, so I hope you don't mind the repost.
You can do this easily with a DIV by giving it the style word-wrap: break-word
(and you may need to set its width, too).
div {
word-wrap: break-word; /* All browsers since IE 5.5+ */
overflow-wrap: break-word; /* Renamed property in CSS3 draft spec */
width: 100%;
}
However, for tables, you also need to apply: table-layout: fixed
. This means the columns widths are no longer fluid, but are defined based on the widths of the columns in the first row only (or via specified widths). Read more here.
Sample code:
table {
table-layout: fixed;
width: 100%;
}
table td {
word-wrap: break-word; /* All browsers since IE 5.5+ */
overflow-wrap: break-word; /* Renamed property in CSS3 draft spec */
}
Hope that helps somebody.