Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS, Text overflows out of table cell

I am working on Virtual Machine so I can't copy code... I will post the screens then. Problem is trivial I guess but I can't deal with it... please give me some suggestions:

Table code: https://dl.dropboxusercontent.com/u/108321090/WWW1.png

CSS code and sight of website: https://dl.dropboxusercontent.com/u/108321090/WWW.png

So in general as you can see on the 2nd link, there is a text in the row and it doesn't want ot wrap, it's going as lane all the time and goes out of table column border.

like image 577
F1sher Avatar asked Jun 26 '13 16:06

F1sher


1 Answers

Illustrative Example

Suppose that you have a simple two-row table with two cells per row:

<table>
    <tr>
        <th>First</th>
        <th>Second</th>
    </tr>
    <tr>
        <td>Tiny text</td>
        <td>VeryLongNonBreakingLineOfTextThatNeedsToWrap</td>
    </tr>    
</table>

One of the cells has a very long word with no spaces, no hyphens so it will not break.

Here is some CSS:

table {
    border: 1px solid lightgray;
}
table th {
    background-color: silver;
    text-align: center;
    padding: 10px;
}
table td {
    width: 200px;
    border: 1px dotted silver;
    word-break: break-all;
}

The cells have a fixed width of 200px. However, because of the long non-breaking word, two things can happen.

(1) The table may increase the column width to accommodate the long text.
(2) The text may flow out of a cell depending on other factors such as using a fixed layout with a specified table width.

If you apply word-break: break-all to the table cells, the text will wrap and the table columns will retain their predefined widths.

See demo at: http://jsfiddle.net/audetwebdesign/xtKLE/

Reference

To learn more about the CSS3 word-break property: http://www.w3.org/TR/css3-text/#word-break

like image 82
Marc Audet Avatar answered Sep 18 '22 14:09

Marc Audet