使用jQuery检测文本省略号（Ellipsis）问题求助

你的问题出在单行检测逻辑不适用于多行截断场景：你用scrollWidth > clientWidth判断，但这只对单行文本溢出有效；而你用-webkit-line-clamp实现的是多行文本省略，这种情况下元素的滚动宽度和可见宽度是相等的，所以条件永远不成立，弹窗自然不会触发。

下面给你两种可行的解决思路：

方法一：通过高度判断（简单直接） #

多行截断是通过限制容器高度实现的，所以可以对比元素的scrollHeight（内容实际高度）和clientHeight（容器可见高度），如果前者大于后者，说明内容被截断显示了省略号。

修正后的JS代码：

$(function() { // 确保DOM加载完成再执行
  var $text = $('.text');
  var e = $text[0];
  if (e.scrollHeight > e.clientHeight) {
    alert("文本已显示省略号");
  }
});

方法二：克隆元素对比高度（兼容性更稳） #

如果担心某些浏览器对scrollHeight的计算有差异，可以克隆一个和原元素内容、样式一致，但去掉溢出截断样式的元素，对比两者的高度：

$(function() {
  var $text = $('.text');
  var $clone = $text.clone()
    .css({
      '-webkit-line-clamp': 'unset',
      'display': 'block',
      'height': 'auto',
      'overflow': 'visible',
      'position': 'absolute',
      'opacity': 0,
      'pointer-events': 'none'
    })
    .appendTo('body');
  
  if ($clone.height() > $text.height()) {
    alert("文本已显示省略号");
  }
  $clone.remove(); // 用完移除克隆元素
});

额外注意事项 #

• 一定要把代码放在$(function(){ ... })里，确保DOM完全加载后再获取元素，否则可能拿到的元素尺寸还没计算完成。
• 你的CSS里.width类要正确应用到容器，确保文本容器有固定宽度限制。

完整可运行代码示例：

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

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

.width {
  width: 30%
}
</style>

<script>
$(function() {
  var e = $('.text')[0];
  if (e.scrollHeight > e.clientHeight) {
    alert("文本已显示省略号");
  }
});
</script>

内容的提问来源于stack exchange，提问作者abcid d