html table overflow,css - HTML Table (td) overflow - Stack Overflow

I have some data outpu in a HTML table, some rows have expandable data fields and this works ok. Some rows are standard and are fine. The widhts seem to be controlled correctly via the CSS.

The Problem

I have limited the size of the table columns and set Overflow to hidden to prevent the data being pushed of the side of the screen, this works ok for Plain text inside a however if the data inside a is XML (which has been formatted for HTML using replacement chars) with a very long string before a line break, this data pushes of the side of the screen.

See the following JSfiddle for an example of what happens

What can i add to the XML to force the text to wrap onto another line similar to "Click to expand) This works as expected. Lorem" line.

Including the code below so i can post. Ignore this its all in the JSFiddle

.outer td:nth-child(4) {

width: 65%;

overflow: hidden;

}

Thanks