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

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

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

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

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

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related