Question

I am wondering it there is a way to detect if text-overflow:ellipsis is active on an input field so i can show a tooltip with the full text.

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
Andreas

---

Please note, this question is about input element. A normal HTML element (e.g., div) also has to have

white-space: nowrap;
overflow: hidden;

for text-overflow: ellipsis; to apply. (Overflow can also be scroll or auto.) See this link for more information.

Answer 1

If you want to know when the input text is too long and hidden … there is no native support for checking thinks like this. You can hack it. You can make a tmp container with the same text, look the width of that container/text and compare it with the length of the input. If the tmp container is longer … you have too long text and.

something like this:

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