Add Dots/ellipsis On Div/span Element Overflow Without Using Jquery

Need to implement functionality similar to what dotdotdot jQuery plugin does but cannot use javascript frameworks (like jquery or ext). Is there any easy way to add the dots to th

Solution 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;
    }
    

<divclass="clipped"style="width: 100px;"title="This is a long text">This is a long text<div>

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

Solution 2:

Works for any number of lines and any width without any javascript - and is responsive. Simply set your max-height to a multiple of your line height: i.e. (22px line height) * (max 3 lines of text) = (max height 66px).

https://codepen.io/freer4/pen/prKLPy

html, body, p { margin: 0; padding: 0; font-family: sans-serif;line-height:22px;}

.ellipsis{
  overflow:hidden;
  margin-bottom:1em;
  position:relative;
}

.ellipsis:before {
  content: "\02026";  
  position: absolute;
  bottom: 0; 
  right:0;
  width: 1.8em; 
  height:22px;
  margin-left: -1.8em;
  padding-right: 5px;
  text-align: right;
  background-size: 100%100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), white 40%, white);
  z-index:2;
}
.ellipsis::after{
  content:"";
  position:relative;
  display:block;
  float:right;
  background:#FFF;
  width:3em;
  height:22px;
  margin-top:-22px;
  z-index:3;
}

/*For testing*/.ellipsis{
  max-width:500px;
  text-align:justify;
}
.ellipsis-3{
  max-height:66px;
}

.ellipsis-5{
  max-height:110px;
}

<divclass="ellipsis ellipsis-3"><p>Here we can have a great many lines of text and it works as we expect it to. Here we can have a great many lines of text and it works as we expect it to. Here we can have a great many lines of text and it works as we expect it to. Here we can have a great many lines of text and it works as we expect it to.</p></div><divclass="ellipsis ellipsis-5"><p>The number of lines shown is easily controlled by setting the max-height of the .ellipsis element. The downsides are the requirement of a wrapping element, and that if the text is precisely as long as your number of lines, you'll get a white area covering the very trailing end of your text. You've been warned. This is just some pushing text to make the element longer. See the ellipsis? Yay.</p></div>

Solution 3:

You could try:

text-overflow: ellipsis;
-o-text-overflow: ellipsis;

This will only work if your elements are not dynamically sized. They will have to have a width set or some other mechanism to keep them from growing to allow more content.

Solution 4:

My solution to my problem can seem a little awkward, but it works for me:)

I used a little of CSS:

word-wrap: break-word;

and Javascript:

var spans = document.getElementsByTagName("span");
for (var i in spans) {
    var span = spans[i];
    if (/*some condition to filter spans*/) { // just if (navigator.appName == 'Microsoft Internet Explorer') {
            span.parentNode.style.display ='inline-block';
        }
        if (span.parentNode.clientHeight > 50 ) {
            span.innerHTML = span.innerHTML.substr(0, 26) + ' ...';
        }
    }
}

Solution 5:

FOR ALL Browser:

.dotdot{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:80px}.dotdot:before { content:'';}

<divclass="dotdot">[ButtonTextGoeshere][1]</div>