Add dots/ellipsis on div/span element overflow without using jquery

Question

Need to implement functionality similar to what dotdotdot jQuery plugin does but cannot use javascript frameworks (like jquery or ext).

Is there an

Answer 1

Why not using the CSS property text-overflow? It works great as long as you define a width in your tag.

Class in CSS:

.clipped {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    

This is a long text

You can also add the text to the title attribute, so the user can see the whole text when hovering over the element.