css td overflow

Question

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

remy · Accepted Answer · 2012-02-11 20:48:31Z

5

Overflow does not work with tables.

You can place a div in the table to solve that.

Here a simple example based on your example

text-overflow is used to get the ... at the end.

answered Feb 11, 2012 at 20:48

remy

1,50110 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

elclanrs Over a year ago

Oops, my bad. I deleted the answer.

Marc Over a year ago

Hello Remy. You rock! It is too bad that it is not working with tables. Nevertheless I have a solution thanks to you. Great :) Cheers

Marc Over a year ago

@Remy - The vertical alignment is not working anymore. I can't manage to fix it. Can you help?

remy Over a year ago

Take a look at the example I changed it according your input. The td needs the height and vertical-align.

dkellner · Accepted Answer · 2022-02-06 23:09:24Z

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.

Collectives™ on Stack Overflow

css td overflow

2 Answers 2

4 Comments

Here's a little tweak.

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Here's a little tweak.

Comments

Your Answer

Sign up or log in

Post as a guest

Related