Using Jquery to detect ellipsis

Question

I have a long sentence showing ellipsis at the end.

I want to use jquery to detect if ellipsis is there, a popup will show up.

But somehow popup doesn't show when the page loads.

Please give me a hand.

var e = $('.text')[0];

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

.text {
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
}

.width{
 width: 30%
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="width">
<div class="text">  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad recusandae perspiciatis accusantium quas aut explicabo ab. Doloremque quam eos, alias dolore, iusto pariatur earum, ullam, quidem dolores deleniti perspiciatis omnis.</div>
</div>

Answer 1

You will need to check each element in turn and set the class. You also need to account for a screen re-size. Here I add a resize event handler and then trigger it on startup as well as handle it when the screen re-sizes.

To test this here us the "Full page" on the output window and resize the browser.

function checkEm() {
  $(".text")
    .removeClass('wrapped-el')
    .filter(function() {
      return this.scrollHeight > this.offsetHeight;
    })
    .addClass('wrapped-el');
}
$(window).on('resize', checkEm).trigger('resize');

.text {
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
}

.width {
  width: 30vw;
}

.width-m {
  width: 45vw;
}

.width-mw {
  width: 60vw;
}

.width-w {
  width: 100vw;
}

.wrapped-el {
  border: solid red 1px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="width">
  <div class="text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad recusandae perspiciatis accusantium quas aut explicabo ab. Doloremque quam eos, alias dolore, iusto pariatur earum, ullam, quidem dolores deleniti perspiciatis omnis.</div>
</div>
<div class="width-m">
  <div class="text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad recusandae perspiciatis accusantium quas aut explicabo ab. Doloremque quam eos, alias dolore, iusto pariatur earum, ullam, quidem dolores deleniti perspiciatis omnis.</div>
</div>
<div class="width-mw">
  <div class="text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad recusandae perspiciatis accusantium quas aut explicabo ab. Doloremque quam eos, alias dolore, iusto pariatur earum, ullam, quidem dolores deleniti perspiciatis omnis.</div>
</div>
<div class="width-w">
  <div class="text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad recusandae perspiciatis accusantium quas aut explicabo ab. Doloremque quam eos, alias dolore, iusto pariatur earum, ullam, quidem dolores deleniti perspiciatis omnis.</div>
</div>