Generate an ellipsis on text overflow

Question

I was looking for a way to add an ellipsis in text when it is more than a certain number of lines. I didn't want to use a plugin and I found a pure JS code from another answer. However, the ellipsis "..." is applied to every single element, even if it doesn't pass the limit of the numbers.

HTML:

<p class="product-title">This is my product title example</p>

CSS:

.product-title {
    line-height: 1.4rem;
    height: 2.8rem;
}

!! I added a height twice of the line-height to make text more than two lines to overflow. If I want three lines, I put three times the line-height.

JS:

function dotify(element) {
    var limit = element.offsetTop + element.offsetHeight;
    var dots = document.createElement('span');
    if (element['data-inner'])
        element.innerHTML = element['data-inner'];
    else
        element['data-inner'] = element.innerHTML;
    dots.appendChild(document.createTextNode('...'));
    element.style.overflow = 'hidden';
    element.appendChild(dots);
    while (dots.offsetTop + dots.offsetHeight > limit) {
        dots.previousSibling.data = dots.previousSibling.data
            .replace(/\W*\w+\W*$/, '')
    }
}


jQuery(".product-title").each(function() {
    dotify(this);
});

Edit with examples of before and after:

Before: Lorem ipsum dolor sit amet, consectetur adipiscing elit,

sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco

laboris nisi ut aliquip ex ea commodo consequat.

After: Lorem ipsum dolor sit amet, consectetur adipiscing elit,

sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...

You can do this with just css (jsfiddle.net/6s4wz2wL/1), but not sure about "lines" as the example is a single line. Could you update your question with a "before" and "after" example please? — freedomn-m
@freedomn-m this work only if you want the "after" to be one line. Let me update the question with before and after. — Tasos

Arun P Johny Arun P Johny · Accepted Answer · 2015-09-04T09:14:09

I think you can check the height of the content before applying the

function dotify(element) {
  if (element.clientHeight >= element.scrollHeight) {
    return
  }
  var limit = element.offsetTop + element.offsetHeight;
  var dots = document.createElement('span');
  if (element['data-inner']) {
    element.innerHTML = element['data-inner'];
  } else {
    element['data-inner'] = element.innerHTML;
  }
  dots.appendChild(document.createTextNode('...'));
  element.style.overflow = 'hidden';
  element.appendChild(dots);
  while (dots.offsetTop + dots.offsetHeight > limit) {
    dots.previousSibling.data = dots.previousSibling.data.replace(/\W*\w+\W*$/, '')
  }
}


jQuery(".product-title").each(function() {
  dotify(this);
});

.product-title {
  line-height: 1.4rem;
  height: 2.9rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="x1" class="product-title">This is my product title example</p>
<p id="x2" class="product-title">This is my product title example This is my product title example This is my product title example This is my product title example</p>
<p id="x3" class="product-title">This is my product title example This is my product title example This is my product title example This is my product title example This is my product title example</p>
<p id="x4" class="product-title">This is my product title example This is my product title example This is my product title example This is my product title example This is my product title example This is my product title example This is my product title example This is my product title example</p>

Generate an ellipsis on text overflow

1 Answers