Html Text-Overflow Ellipsis Detection

HTML text-overflow ellipsis detection

Once upon a time I needed to do this, and the only cross-browser reliable solution I came across was hack job. I'm not the biggest fan of solutions like this, but it certainly produces the correct result time and time again.

The idea is that you clone the element, remove any bounding width, and test if the cloned element is wider than the original. If so, you know it's going to have been truncated.

For example, using jQuery:

var $element = $('#element-to-test');
var $c = $element
           .clone()
           .css({display: 'inline', width: 'auto', visibility: 'hidden'})
           .appendTo('body');

if( $c.width() > $element.width() ) {
    // text was truncated. 
    // do what you need to do
}

$c.remove();

I made a jsFiddle to demonstrate this, http://jsfiddle.net/cgzW8/2/

You could even create your own custom pseudo-selector for jQuery:

$.expr[':'].truncated = function(obj) {
  var $this = $(obj);
  var $c = $this
             .clone()
             .css({display: 'inline', width: 'auto', visibility: 'hidden'})
             .appendTo('body');

  var c_width = $c.width();
  $c.remove();

  if ( c_width > $this.width() )
    return true;
  else
    return false;
};

Then use it to find elements

$truncated_elements = $('.my-selector:truncated');

Demo: http://jsfiddle.net/cgzW8/293/

Hopefully this helps, hacky as it is.

Detect text-overflow has worked and add tooltip containing full text

You can't detect an overflow with CSS. But using JavaScript it's simply this:

JavaScript

var e = document.getElementById('email');

if (e.scrollWidth > e.clientWidth) {
    alert("Overflow");
}

Demo

Try before buy

Detect CSS text-overflow ellipsis with jQuery

I forgot to post my solution.

Now i'm using el.scrollWidth > el.clientWidth; and it's working well.

Note that el in this case is not jquery wrapped.

Wrong elipsis detection with scrollWidth when text length is close to width

I found this hacky solution
https://stackoverflow.com/a/64689702/3703099

function isEllipsisActive(e) {
  var c = e.cloneNode(true);
  c.style.display = 'inline';
  c.style.width = 'auto';
  c.style.visibility = 'hidden';
  document.body.appendChild(c);
  const truncated = c.offsetWidth >= e.clientWidth;
  c.remove();
  return truncated;
}

I'm not a big fan as adding a new element to DOM everytime we do the check is an heavy cost for perf versus the previous method which just compare 2 attributes, but I couldn't find better :(, any better solution is still welcome

How to add an ellipsis on the third line of text?

You can truncate the text using line-clamp. The ellipsis effect comes from using display: -webkit-box; and -webkit-box-orient: vertical; paired with overflow: hidden;.

.post-desc {
  width: 100px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  border: 1px solid #000000;
}

<p class="post-desc">This is some long text that will not fit in the box.</p>