Question 168992 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Can Jquery detect ellipsis?

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>
Tags:

2

Answers


  1. 0

    Just check the size of the text and the container, text element just trigger a overflow over it’s parent, but with ellipsis this is not visible, at least that’s a way to understand it

    function hasEllipsis(selector) {
    // let $element = document.querySelector(selector); // no jquery version, check the available selectors, it works with class selector ".text"
  let $element = $(selector);
  
  // for document.querySelector dont use index zero
  // $element[0] jquery is the same as $element with queryselector
  return $element[0].offsetHeight < $element[0].scrollHeight;
}

console.log(hasEllipsis(".text"));
    .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>
    Login or Signup to reply.
  2. 0

    Here is a way to check if text is ellipse or not:-

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

if($(e).css("text-overflow") == 'ellipsis'){
  alert("ellipsis Found");
}
    .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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search