Detect If Text-Overflow:Ellipsis Is Active on Input Field

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

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

HTML text-overflow ellipsis detection

Once upon a time I needed to do this, and the only cross-browser reliable solution I came across was hack job. I'm not the biggest fan of solutions like this, but it certainly produces the correct result time and time again.

The idea is that you clone the element, remove any bounding width, and test if the cloned element is wider than the original. If so, you know it's going to have been truncated.

For example, using jQuery:

var $element = $('#element-to-test');
var $c = $element
           .clone()
           .css({display: 'inline', width: 'auto', visibility: 'hidden'})
           .appendTo('body');

if( $c.width() > $element.width() ) {
    // text was truncated. 
    // do what you need to do
}

$c.remove();

I made a jsFiddle to demonstrate this, http://jsfiddle.net/cgzW8/2/

You could even create your own custom pseudo-selector for jQuery:

$.expr[':'].truncated = function(obj) {
  var $this = $(obj);
  var $c = $this
             .clone()
             .css({display: 'inline', width: 'auto', visibility: 'hidden'})
             .appendTo('body');

  var c_width = $c.width();
  $c.remove();

  if ( c_width > $this.width() )
    return true;
  else
    return false;
};

Then use it to find elements

$truncated_elements = $('.my-selector:truncated');

Demo: http://jsfiddle.net/cgzW8/293/

Hopefully this helps, hacky as it is.

How to use text-overflow ellipsis in an html input field?

I know this is an old question, but I was having the same problem and came across this blog post from Front End Tricks And Magic that worked for me, so I figured I'd share in case people are still curious. The gist of the blog is that you CAN do an ellipsis in an input in IE as well, but only if the input has a readonly attribute.

Obviously in many scenarios we don't want our input to have a readonly attribute. In which case you can use JavaScript to toggle it. This code is take directly from the blog, so if you find this answer helpful you might consider checking out the blog and leaving a comment of appreciation to the author.

// making the input editable$('.long-value-input').on('click', function() {  $(this).prop('readonly', '');  $(this).focus();})
// making the input readonly$('.long-value-input').on('blur', function() {  $(this).prop('readonly', 'readonly');});

.long-value-input {  width: 200px;  height: 30px;  padding: 0 10px;  text-overflow: ellipsis;  white-space: nowrap;  overflow: hidden;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="long-value-input-container">  <input type="text" class="long-value-input" value="sdghkjsdghhjdfgjhdjghjdfhghjhgkdfgjnfkdgnjkndfgjknk" readonly /></div>

Detect CSS text-overflow ellipsis with jQuery

I forgot to post my solution.

Now i'm using el.scrollWidth > el.clientWidth; and it's working well.

Note that el in this case is not jquery wrapped.

Detecting CSS text-overflow: ellipsis in Firefox

you need to add div inside each td to make it work in firefox,

<td class="first"><div>Here is some text</div></td>
<td class="second">
     <div>Here is some more text. A lot more text than
     the first one. In fact there is so much text you'd think it was a 
     waste of time to type all ofit.
     </div>
</td>

CSS

td div {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow:hidden;
   width:100%;
}

Jsfiddle

http://jsfiddle.net/mjnvk/7/

---

Related Topics