Question

我有一个可能包含长文本的元素。我正在寻找一个jQuery函数来检测文本是否溢出元素的宽度或高度，如果是，则必须将一个类添加到父元素。（我不是在寻找text-ellipsis属性。）

如何做到这一点？我已经开始了fiddle here。显然，它不适用于$(elm).text().width()。如何获取text（）的宽度？

Answer 1

clone到临时元素，更改styles并将比例与原始元素进行比较，最后删除该临时对象并返回比较结果。

＆＃13;

$.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;
};
$(".title:truncated").addClass("text-style");

＆＃13;

.title {
  width: 300px;
  overflow: hidden;
  height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-style {
  color: red;
}

＆＃13;

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="title">A very long title title title - if I break I must have the class "text-style" appended</div>
<div class="title">A very long title title title </div>

＆＃13;

＆＃13; 演示：https://jsfiddle.net/kishoresahas/6mL79xdL/8

如果文本溢出父元素，则添加类

1 个答案: