CSS, Text overflows out of table cell

Question

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.

Answer 1

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