jQuery truncate text by CSS overflow

Question

I want to truncate the input value by the available space for letters on the screen.

For example, if my input field can contain only 5 letters and after that the input 'scrolls' to the right (overflow) I want jQuery to limit only to 5 letters because that's the available and visible space to the user.

Bottom line - I want jQuery to truncate to the visible letters according to the input's overflow and remove the letters which are not visible.

Example:

I want jquery to truncate the text only to Lorem Ips although the value is actually Lorem Ipsum

How can I do that?

have you tried the maxlength attribute? <input type="text" maxlength="5" /> — G.Hunt
– G.Hunt, Commented Aug 3, 2017 at 11:59
maxlength is not an option since I have lots of lots of inputs with different widths — Broshi
– Broshi, Commented Aug 3, 2017 at 12:01
I suppose you are looking to find the available width of the input with regard to the character width? If so, this has been answered at: stackoverflow.com/a/118251/2024411 — Nitin Suri
– Nitin Suri, Commented Aug 3, 2017 at 12:02

Nanhe Kumar · Accepted Answer · 2017-08-03 12:02:26Z

1

$(document).ready(function(){
    $("#id_of_textbox").attr('maxlength','5');
});

answered Aug 3, 2017 at 12:02

Nanhe Kumar

16.4k5 gold badges84 silver badges72 bronze badges

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

2 Comments

Broshi Over a year ago

I have hundreds of inputs each with a different width..so max length is not possible

Nanhe Kumar Over a year ago

@Broshi : You can do can you share your html

Kiran Shakya · Accepted Answer · 2017-08-11 05:57:05Z

I have a snippet ready as you requested, thanks for the author of this codepen snippet

If you think this answer as helpful, please give some credit to the author of above codepen snippet too.

///////////////////////////////////////////////
// Source: https://codepen.io/Momciloo/pen/bpyMbB
///////////////////////////////////////////////
$.fn.textWidth = function(text, font) {

  if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body);

  $.fn.textWidth.fakeEl.text(text || this.val() || this.text() || this.attr('placeholder')).css('font', font || this.css('font'));

  return $.fn.textWidth.fakeEl.width();
};
///////////////////////////////////////////////

$("input").on("input", function(e) {
  var tWidth = $(this).textWidth(),
      cWidth = $(this).width();
  if (tWidth > cWidth) {
    $(this).val($(this).data("val"));
  } else {
    $(this).data("val", $(this).val());
  }
});

input {
  clear: both;
  float: left;
}

.i1 {
  width: 12em;
}

.i2 {
  width: 6em;
}

.i3 {
  width: 2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="i1" />
<input type="text" class="i2" />
<input type="text" class="i3" />

Collectives™ on Stack Overflow

jQuery truncate text by CSS overflow

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related