CODEWITHSUNDEEP
htmlcss
Explosion Pills
Explosion Pills

Reputation: 191819

Break long word in table cell with percentage widths

http://jsfiddle.net/L2yLe/

The fiddle says it all. I want a css-only solution that limits the width of the table to the width of the div. The long string should be broken (but as you can see it isn't), and that causes the table to overflow.

I don't want to use any pixel widths. This should be completely fluid.

<div>
<table>
    <tr>
        <td>
            short string
        </td>
        <td>
somereallylongstringofdatasomereallylongstringofdatasomereallylongstringofdata
        </td>
        <td>
            short string
        </td>
    </tr>
</table>
</div>

div {
    width: 50%;
    background-color: darkgray;
    padding: 15px;
    margin: 10px auto;
}
table {
    border-collapse: collapse;
}
td {
    border: 1px solid black;
}

Upvotes: 22

Views: 21040

Answers (7)

User1793
User1793

Reputation: 47

Adding "word-break: break-all;" will work!

See this Example.

Upvotes: 4

Pavel Blagodov
Pavel Blagodov

Reputation: 572

Guys take a look on http://blog.kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/

/* Warning: Needed for oldIE support, but words are broken up letter-by-letter */
   -ms-word-break: break-all;
   word-break: break-all;

   /* Non standard for webkit */
   word-break: break-word;

   -webkit-hyphens: auto;
   -moz-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;

Upvotes: 27

Explosion Pills
Explosion Pills

Reputation: 191819

My solution is a bit ugly. but it works really well. Either using JS or whatever is emitting your html, you can put <wbr> between every X characters of text. This lets the browser make its decision about when to break the words, but visually, it will appear as one string if it fits in the table cell.

Upvotes: 1

Dampsquid
Dampsquid

Reputation: 2474

I've been playing arround with this for a while, and its not proving easy at all.

I put the long text in a div and word wrapped that but the TD cell still went to the full width even though the div wraped the text.

I have a solution but its rather alot to add so on a multi row table would probably ne excessive, I'll put here in case anyone else can improve on it, I am be no means a HTML developer and have just started to dabble myself, but here goes

mixed table solution

I have put the large text in another table inside the original td and set that table to layout: fixed; width 100%. also added border to show whats going on. Its a bit crowbar i hope someone else can improve it.

Upvotes: 1

Evert
Evert

Reputation: 8541

I don't think it is possible to break the word using css. You would be able to calculate the number of characters when fetching the data and then insert span tags around sections of the text if it exceeds a predetermined number of consecutive non-breaking characters. The default rendering of browsers would then place the inline spans next to each other if there is sufficient space, or break onto the next line if there isn't.

Upvotes: 0

sandeep
sandeep

Reputation: 92863

write this:

table {
border-collapse: collapse;
    table-layout: fixed;
    width:100%
}
td {
    border: 1px solid black;
    word-wrap:break-word;
}

Check this: http://jsfiddle.net/L2yLe/7/

Upvotes: 11

crush
crush

Reputation: 17033

There is a CSS3 property: word-wrap: break-word;...ofc that requires the browser to have CSS3 support.

Upvotes: 1

Related Questions