Prevent text from overlap table td width

css, html, html-table, width

Solution

Well, there's `max-width`, `max-height`, and `overflow` in CSS.

So

td.whatever
{
    max-width: 150px;
    max-height: 150px;
    overflow: hidden;
}

would restrict the maximum width and height to 150px, and it can be anything from less than 150 up to 150, and anything that doesn't fit inside that will be clipped off and hidden from view.

Overflow's default (`overflow: visible;`) is to simply allow anything that won't fit inside its specified container to just spill over outside of it. If you only want to limit it horizontally and don't want to hide anything, `word-wrap` may help:

td.whatever
{
    max-width: 150px;
    word-wrap: break-word;
}

`word-wrap` will break words whenever it needs to, even if it's not at the end of a word. You can also just use `height` and `width` to specify a fixed size if you don't want the table to expand or shrink at all.

Problem

How can I restrict the table `<td>` entry to expanding over the entire screen when the entry is too long?

Original source