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

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...

Solution 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.

Solution 2:

Just with some CSS like answer of Gordon. Just added the display:block property for an inline element like <a> or <p> :

a#myText{
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 300px;
}

You could use it with many browser like you can see on this link : http://caniuse.com/#search=text-overflow