检测文本溢出:省略号在输入字段上是否处于活动状态

Detect if text-overflow:ellipsis is active on input field

本文关键字：是否 活动状态 字段 输入 溢出 文本 省略号 检测      更新时间：2023-09-26

我想知道有没有一种方法可以检测输入字段上的text-overflow:ellipsis是否处于活动状态，以便我可以显示带有全文的工具提示。

Css：

input[type='text']
{
    text-overflow:ellipsis;
}

目录：

<input type="text" onmouseover="Tooltip.Show(this)" value="some long text" />

Javascript：

Tooltip.Show = function (input)
{
    // This is where i need the see if the current input show ellipsis.
    if ($(input).isEllipsisActive()) 
    {
        // Show the tooltip
    }
}

BR
安德烈亚斯

<小时 />

请注意，这个问题是关于input元素的。一个普通的HTML元素（例如，div）也必须有

white-space: nowrap;
overflow: hidden;

供text-overflow: ellipsis;申请。（Overflow也可以是scroll或auto。有关详细信息，请参阅此链接。

如果您

想知道输入文本何时太长且隐藏...没有本机支持检查这样的想法。你可以破解它。您可以使用相同的文本制作一个 tmp 容器，查看该容器/文本的宽度并将其与输入的长度进行比较。如果 tmp 容器更长...你的文字太长了。

像这样：

function isEllipsisActive() {
  return_val = false;
  var text = $('input_selector').val();
  var html = "<span id="tmpsmp">" + text + "</span>";
  $(body).append(html);
  if($('input_selector').width() < $('#tmpsmp').width()) {
   return_val = true;
  }
  return return_val;
}

谢谢亚历山德连科。

刚刚编辑了一点您的解决方案：

 function isEllipsisActive(el) {
  return_val = false;
  var text = el.val();
  var html = "<span id='tmpsmp'>" + text + "</span>";
  $("body").append(html);
  if(el.width() < $('#tmpsmp').width()) {
   return_val = true;
  }
  $('#tmpsmp').remove();
  return return_val;
}
相关文章：