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?

maxlength is not an option since I have lots of lots of inputs with different widths — Broshi, Aug 03 '17 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: https://stackoverflow.com/a/118251/2024411 — Nitin Suri, Aug 03 '17 at 12:02
@Broshi always show some relevant and short snippet of your working code with your question so that we could point out where you are doing wrong or suggest better ideas. — Kiran Shakya, Aug 03 '17 at 13:01

score 1 · Answer 1 · answered Aug 03 '17 at 12:02

1

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

answered Aug 03 '17 at 12:02

Nanhe Kumar

15,498
5
79
71

I have hundreds of inputs each with a different width..so max length is not possible – Broshi Aug 03 '17 at 12:03
@Broshi : You can do can you share your html – Nanhe Kumar Aug 03 '17 at 12:05

Kiran Shakya · Accepted Answer · 2017-08-11T05:57:05.937

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" />

jQuery truncate text by CSS overflow

2 Answers2