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 any easy way to add the dots to the content of div or span element if content takes more space then element should??? (similar to what css overflow: ellipsis setting does)

Can't use ellipsis beacause it doesn't work with many lines when height is limited.

Thank you :)

Solution 1

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 2

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

<div class="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 3

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

<div class="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>

<div class="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 4

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.

View more solutions

Comments

[Bohdan]

The problem is that there can be many lines of the text, how can I make it in case of that?

[martinstoeckli]

@Bohdan Voloshyn - If the text is really very long, just use the first lets say 250 characters for the title, and append '...' at the end.

[Bohdan]

I actually started with cutting to 50 characters and append '...' (that's a requirement :)),

[Bohdan]

but when there are many words like WWWWWWWW - it puts each word to a separate line and it ends up with 5 rows - the problem is that I can afford only 3 rows. When overflow: hidden is used - the content is simply cutted, and therefore '...' is not visible.

[martinstoeckli]

@Bohdan Voloshyn - Are you talking about the title or the div element now? I don't think that you have much control over the title window, it may differ from browser to browser. One possibility would be to write a hidden div and show it only when hovering over the element (with CSS). An example you can find here bencosweb.com/franz/tooltip_cssplay/index.html .

[RAJ]

@Bohdan Voloshyn Have you got solution of you this problem? I also have same issue...

[SearchForKnowledge]

can you please provide a JSFiddle?