I am trying to show the one line sentence followed by three dots (...) if the range goes beyond the line size.
I have used the below CSS which works fine on Mozilla and Chrome but does not work on IE 11.
display: block;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 20px;
Please let me know if this is due to any version issue on IE11 for this ellipsis or if there is a fix for it.
For IE ellipsis will only work on input fields if the readonly attribute is set to readonly or true.
$('.all-javascript input').on('focusout',
function() {
$(this).prop('readonly', 'readonly')
})
$('.all-javascript input').on('focusin',
function() {
$(this).prop('readonly', false)
})div {
margin: 40px 20px;
}
input {
width: 300px;
display: inline-block;
white-space: nowrap
overflow:hidden;
text-overflow:ellipsis;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="chrome">
<input type="text" value="Lorem ipsum dolor sit amet, liberavisse signiferumque ex pri, diam brute epicurei cum ad. Ne mutat nostrud erroribus eam. At vis ignota appareat, vis tollit dicant cu. Est ceteros consequuntur an, an diceret iracundia maiestatis sea, an modo perfecto ocurreret mea. An mel quot philosophia. Elit dicant expetenda qui te.">
</div>
<div class="ie-11">
<input type="text" value="Lorem ipsum dolor sit amet, liberavisse signiferumque ex pri, diam brute epicurei cum ad. Ne mutat nostrud erroribus eam. At vis ignota appareat, vis tollit dicant cu. Est ceteros consequuntur an, an diceret iracundia maiestatis sea, an modo perfecto ocurreret mea. An mel quot philosophia. Elit dicant expetenda qui te." readonly='readonly'>
</div>
<div class="all-javascript">
<input type="text" value="Lorem ipsum dolor sit amet, liberavisse signiferumque ex pri, diam brute epicurei cum ad. Ne mutat nostrud erroribus eam. At vis ignota appareat, vis tollit dicant cu. Est ceteros consequuntur an, an diceret iracundia maiestatis sea, an modo perfecto ocurreret mea. An mel quot philosophia. Elit dicant expetenda qui te.">
</div>