HTML Table (td) overflow

Question

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

MatthewG · Accepted Answer · 2015-02-06 16:46:02Z

1

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.

answered Feb 6, 2015 at 16:46

MatthewG

9,3732 gold badges28 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

KF-SoftwareDev Over a year ago

This is perfect, and does not cut the words in the centre, they are moved to the next line. Thanks

user488187 · Accepted Answer · 2015-02-06 16:47:35Z

1

Tell the browser to do it:

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

answered Feb 6, 2015 at 16:47

user488187

2 Comments

Joseph Casey Over a year ago

Try avoid using break-all. it isn't very good for the reader. Consider this: stackoverflow.com/questions/1795109/…

KF-SoftwareDev Over a year ago

This works as well, but the words are broke in the middle, however i guess this answers my question since I was using &nbsp. Thanks

Joseph Casey · Accepted Answer · 2015-02-06 16:49:21Z

1

Try this:

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

Technically your xml is being treated as an unbreaking line.

answered Feb 6, 2015 at 16:49

Joseph Casey

1,3031 gold badge14 silver badges35 bronze badges

1 Comment

user488187 Over a year ago

I think that you mean word-wrap.

Collectives™ on Stack Overflow

HTML Table (td) overflow

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related