Why are fixed table-layout td words not wrapping?

Question

I have a table that is being populated with different lengths of text. I have set the table-layout css property to fixed because it keeps pushing the table outside it's parent creating a horizontal scrollbar.

I want my td's to be exactly half of the table which will be full size of it's parent. I want my text to wrap inside the td's. Here is what it looks like:

I want the text to wrap around 20 so it doesn't overlap the other text. I can't use a <br />.

Here is a JSFiddle of the problem.

Viens

The reason it happens in your case is that the browser doesn't know where to break the word. You don't have any spaces, so it breaks the box model. – Gore

Answer 1

You could use word-wrap: break-word on the p. It worked in your jsFiddle, and it's compatible with IE as Microsoft developed it.

Gore

Do you know why we have to add this css property? In normal situations when p tags aren't in this situation their words wrap as I would expect them to do here. – Viens

You don't have any spaces in your text, therefore the browser considers it to be one long word. Browsers don't wrap long words unless that CSS declaration is made. – Gore

Wow, Thanks I didn't even realize that haha. – Viens

Answer 2

as you are setting container width smaller, try to increase container width, Check JSFiddle for demo, width 250 will break to the exact 20 position.

#container
{
    width: 250px;
}
p
{
 word-wrap: break-word
 }

Infect

I need it to be this smaller width. – Viens

Answer 3

The reason that it is not breaking is because there is no spaces in the string. As soon as you add a space to the set of numbers it breaks. Therefore, one way to fix that would be to assign word-wrap:break-work to the p selector.

Flapdoodle