0

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

KF-SoftwareDev
  • 403
  • 1
  • 6
  • 17

3 Answers3

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.

MatthewG
  • 8,583
  • 2
  • 25
  • 27
1

Tell the browser to do it:

.outer td {
    word-break: break-all;
}
  • Try avoid using break-all. it isn't very good for the reader. Consider this: http://stackoverflow.com/questions/1795109/what-is-the-difference-between-word-break-break-all-versus-word-wrap-break – Joseph Casey Feb 06 '15 at 16:49
  • 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 – KF-SoftwareDev Feb 06 '15 at 17:38
1

Try this:

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

Technically your xml is being treated as an unbreaking line.

Joseph Casey
  • 1,283
  • 1
  • 14
  • 34