Search code examples
htmlcsscss-tables

Insert word breaks before a word extends beyond container

I have a problem where a table overflows its container. There is one cell that contains a pre with dynamic content, and this cell causes the table to extend beyond its parent. I think that all I need is to force it to wrap the lines so that the table doesn't overflow. I tried:

pre.content {
    white-space: pre-wrap;
}

To preserve white space as well as wrap the content, but this seems to insert breaks only after a word has already extended beyond its bounds. I want it to wrap a word before it leaves the container. I realize that I could break mid-word with word-wrap: break-word; but this makes it very hard to read.

I'm still trying to learn all the in and outs of CSS so I might have a wrong diagnosis. The table does not have a set width because I am assuming that the table should remain within its parent by default. I am starting to think I am wrong. I tried to set the width to 100% but then that seems to make all the cell widths equal which is not what I want. So I figure getting the correct wrapping will fix the problem.

Hopefully someone can help!

Solution

  • presuming that this js fiddle is an accurate representation of what you have done: http://jsfiddle.net/xDMYR/2/

    Tables will expand to contain their content unless you give them a fixed width. As you can see from the example the second table has expanded to be larger than the div it is contained within because its content is too big. However the first table has no words that are too large for the content and so has wrapped the words accordingly.

    Your content must be too big for the space you have provided. The solution is to shorten the content inside the dynamic table cell or you can force the words to break as shown in the third table. this does produce some odd results however.

    For reference the code for this is:

    -ms-word-break: break-all;
 word-break: break-all;
 word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;

    For more information on word breaks/wrapping take a look here: http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/