Question

I’ve got some text that is roughly 20 lines. Most lines are short, but some are long. The text is inside a column and the page has two columns. The problem is that long lines are causing interacting badly with the float. Instead of to columns, I get one column stacked on top of the other.

I googled around and I think I should be able to use word-wrap, but adding it to my css does nothing. What am I missing?

Here’s css.

.two{
    float: right;
    width: 45%;
    margin-right: 2.5%;
    margin-left: 2.5%;
    word-wrap: break-word;  
}

If there’s a better way to do this, I’m all ears.

Edit: Here’s a jsfiddle link.

Answer 1

This was an issue that only appeared in Chrome.

I found this post, which gave me the solution: http://ryan.stawarz.com/tech-tidbits/chrome-table-cells-not-word-wrapping-correctly/

I added these line to my the appropriate section of my CSS file and all was fixed.

table-layout: fixed;
word-wrap: break-word;