How do I indicate long text into a smaller fixed column with CSS?

Question

How do I fit long text into a fixed width column where I have room for only one line of text? The text needs to be cut to a fixed width (lets say to 100px) and I would like to add dots "..." at the end. Something like this for example:

Given string:

Some really long string that I need to fit in there! 

Desired output in fixed-width-column should be:

Some really long string... 

Answer 1

You can do this with CSS alone:

.box {     -o-text-overflow: ellipsis;   /* Opera */     text-overflow:    ellipsis;   /* IE, Safari (WebKit) */     overflow:hidden;              /* don't show excess chars */     white-space:nowrap;           /* force single line */     width: 300px;                 /* fixed width */ } 

Note: You will want to check on the latest browser support.