'css td overflow

I have a table. I one of the td I have some longer text. When the text hits the right border, it goes to the line. Normal. What I would like is nevertheless a little different. When the first line hits the border I want the overflow to be hidden and have the last 3 visible characters be replaced by "...". Hope someone can help. Thank you in advance for your replies. Cheers Marc.

Here the example:

http://cssdesk.com/3HTnq
cssoverflow


Solution 1:[1]

Here's a little tweak.

    td {
        max-width:1px;         /* makes all the difference! */
        white-space:nowrap;
        overflow:hidden;
    }

Try it: https://codepen.io/dkellner/pen/MWObPgY

Apparently, if you use max-width and give it any numeric value, the browser suddenly understands that you're trying to cut the contents, but since it's not an explicit width, it will let the content grow. So it's kind of autosize plus crop, which was never possible as far as I remember. Again, not sure why literally any max-width value does the trick, max-width:1px should make it one single pixel wide; but it seems to work in all major browsers AND Microsoft Edge. (Sorry Redmond, couldn't help this one.)

You can even give it text-overflow:ellipsis, it just works as expected.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 dkellner

Related Questions