jQueryはCSSオーバーフローによるテキストを切り捨てます

Question

inputの値を画面上の文字の空きスペースで切り捨てたいとします。

たとえば、私のinputフィールドには5文字しか含めることができず、その後に入力が右にスクロールすると、jQueryは5文字に制限されます。

ボトムライン - jQueryが入力のオーバーフローに従って表示される文字を切り捨て、表示されない文字を削除します。

例：

私は、値が実際にLorem Ipsum

私はそれをどのように行うことができますですが、jQueryのだけLorem Ipsにテキストを切り捨てるしたいですか？

Answer 1

あなたが要求したように私はあなたが参考としてこの回答を考える場合、あまりにもcodepenスニペット上記の著者にいくつかのクレジットを与えてください、this codepen snippet

の作者に感謝を準備スニペットを持っています。

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

Answer 2

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