Why can't I get Ellipsis to work on IE 11

Question

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.

Answer 1

IE11 support white-space:nowrap; & text-overflow:ellipsis;

Try like this

h2 {
    display: block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis; 
    padding-right: 20px;    
}

Answer 2

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>

Answer 3

Try this code it will work in IE 11

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

Answer 4

IE11 weirdness

One interesting fact about IE and overflow:ellipsis – if your text contains line breaks, it will only work for the first line. Here's an example:

<style>
    div {
        width:100px;
        text-overflow:ellipsis;
        overflow:hidden;
        white-space:nowrap;
        padding-bottom:10px;
    }
</style>
<div style="color:green">
    Something longer than a line
</div>
<div style="color:red">
    Something longer than a line<br>
    And here's another, just<br>
    to demonstrate this weirdness
</div>

Here's what it looks like – IE11 on the left, well educated browsers on the right:

– vs –