CODEWITHSUNDEEP
cssuser-interfaceinternet-explorer-11ellipsis
Bhanu
Bhanu

Reputation: 221

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

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.

Upvotes: 1

Views: 2959

Answers (4)

dkellner
dkellner

Reputation: 9926

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:

Multiline overflow rendered in IE11 – vs – Multiline overflow rendered in any other browser

Upvotes: 0

Daut
Daut

Reputation: 2625

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>

Upvotes: 0

Abhishek Shah
Abhishek Shah

Reputation: 460

Try this code it will work in IE 11

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

Upvotes: 0

Rajath Kumar PM
Rajath Kumar PM

Reputation: 655

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;    
}

Upvotes: 1

Related Questions