CODEWITHSUNDEEP
htmlcss
KF-SoftwareDev
KF-SoftwareDev

Reputation: 403

HTML Table (td) 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

http://jsfiddle.net/bj0jav2y/

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

Upvotes: 0

Views: 94

Answers (3)

Joseph Casey
Joseph Casey

Reputation: 1303

Try this:

.content span {word-wrap:break-word;}

Technically your xml is being treated as an unbreaking line.

Upvotes: 1

user488187
user488187

Reputation:

Tell the browser to do it:

.outer td {
    word-break: break-all;
}

Upvotes: 1

MatthewG
MatthewG

Reputation: 9283

Your XML has a bunch of   characters in it.   stands for "non-breaking space," so it is specifically designed to do the opposite of what you are asking - that is, it will not break even if it is too long for the line. If you replace all the instances of   with a plain old space '' character, then your XML will wrap just like the lorum ipsum text.

Upvotes: 1

Related Questions