How to break a word with two 50% table cells?

Question

I'm trying to break long words in a table of two 50% width cells. I have already tried word-wrap: break-word; but it's not helping.

HTML

<section class="table-wrapper">
    <section class="table-left">
        <p>LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG</p>
    </section>
    <section class="table-right">
        <p>SHOOOOOOOOOOOOOOOOOOORT</p>
    </section>
</section>

CSS

.table-wrapper {
    display:table;
    border-collapse:separate;
    border-spacing:5px 5px;
    width: 100%;
}

.table-left, .table-right {
    display: table-cell;
    width: 50%;
}

Jsfiddle: http://jsfiddle.net/Lu50tLmf/

It is breaking the whole element size and it is too large if the word is too long. How can I fix this?

Answer 1

You could use the word-break property.

Allow long words to be able to break and wrap onto the next line

In .table-left, .table-right:

Remove display:table-cell;

Add word-break:break-all;

Change to this:

.table-wrapper {
    display:table;
    border-collapse:separate;
    border-spacing:5px 5px;
    width: 100%;
}

.table-left, .table-right {
    width: 50%;
    word-break:break-all;
}

JSFiddle Demo