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

【问题标题】：Detect if text-overflow:ellipsis is active on input field检测文本溢出：省略号是否在输入字段上处于活动状态
【发布时间】：2012-04-29 21:22:26
【问题描述】：

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

CSS：

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

HTML：

<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。）有关详细信息，请参阅 this link。

【问题讨论】：

标签： javascript tooltip ellipsis css

【解决方案1】：

如果您想知道输入文本何时太长且隐藏...没有原生支持检查这样的想法。你可以破解它。您可以使用相同的文本制作一个 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;
}

【讨论】：

如果应用程序有复杂的css规则，它将无法工作。

【解决方案2】：

感谢亚历山德连科。

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

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

【讨论】：