我有一個長句，結尾顯示省略號。

我想使用jquery來檢測省略號是否存在，將會顯示一個彈出窗口。

但不知何故，頁面加載時彈出窗口不顯示。

請幫我一把。

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>

您需要依次檢查每個元素并設置類。您還需要考慮屏幕尺寸的調整。這里我添加了一個resize事件處理程序，然后在啟動時觸發它，并在調整屏幕大小時處理它。

為了驗證這一點，我們使用了& quot整頁& quot并調整瀏覽器的大小。

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>

只需檢查文本和容器的大小，文本元素只是觸發其父元素的溢出，但對于省略號這是不可見的，至少這是理解它的一種方式

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>

這里有一種方法來檢查文本是否是橢圓:-

let parentDiv = document.querySelector('.width');
let textDiv = document.querySelector('.text');
let width = textDiv.getBoundingClientRect().width;
let height = textDiv.getBoundingClientRect().height;

let tempDiv = document.createElement('div');
let tempText = document.createTextNode(textDiv.innerText);
tempDiv.className = 'tempdiv';
tempDiv.style.cssText = "opacity: 0; position: fixed; width: " + textDiv.getBoundingClientRect().width + "px";
tempDiv.appendChild(tempText);
parentDiv.append(tempDiv);

let tempWidth = tempDiv.getBoundingClientRect().width;
let tempHeight = tempDiv.getBoundingClientRect().height;

tempDiv.remove();

// Check width and Height
if (width != tempWidth || height != tempHeight) {
  alert("ellipse 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>

如果您正在使用jquery，使用它的功能是一個好主意。 沒有必要指定text-overflow:省略號；如果使用-webkit-line-clamp。

if ( $('.text').prop('scrollHeight') > $('.width').height() ) alert('Ellipsis');

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

.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>