Question

我想知道有一种方法可以检测输入字段上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
安德烈亚斯

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

Answer 2

感谢Aleksandrenko。

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

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

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

2 个答案: