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

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.

Aleksandrenko · Accepted Answer · 2012-04-18 13:04:50Z

11

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

answered Apr 18, 2012 at 13:04

Aleksandrenko

3,0836 gold badges30 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

huan feng Over a year ago

It won't work if the application has complex css rules there.

tinny77 · Accepted Answer · 2014-10-15 07:55:19Z

2

Thanks Aleksandrenko.

Just edited a little your solution:

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

answered Oct 15, 2014 at 7:55

tinny77

614 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related