1

The following css works and display the ellipsis (highlighted in red color) in case of Chrome browser with results as mentioned below:

Chrome:

position: relative;
display: -webkit-box;
max-height: 136px;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;

Result:

enter image description here

But in case of IE 11 it is not displaying the ellipsis :

enter image description here

enter image description here

Can anyone help me to fix this issue?

santosh kumar patro
  • 7,231
  • 22
  • 71
  • 143

1 Answers1

1

Tested and it seems to work just fine: https://jsbin.com/zaxasamoxa/1/edit

h1 {
  width: 100px;
  position: relative;
  display: block;
  display: -webkit-box;
  max-height: 136px;
  -webkit-line-clamp: 4px;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
<h1>absdfmksdlfmdlskflsdkfmlsdkmflskdmf</h1>

Check your CSS for other rules that might me messing things around.

Note that display: -webkit-box; will break the ellipsis in chrome.

Support also confirmed by https://caniuse.com/#feat=text-overflow

enter image description here

rafaelcastrocouto
  • 11,781
  • 3
  • 38
  • 63
  • On visiting the url I am seeing a different response. I tried it multiple times but I see absdfm as the response for both Chrome and IE browser. – santosh kumar patro May 15 '19 at 12:34
  • Did it worked for you? I tried multiple times and found not working. Any help on this is much appreciated. – santosh kumar patro May 15 '19 at 13:51
  • As you can see in the screenshot, it worked for me. 1st you should check the IE version. You could also try to remove every other css property and check if it works. If it don't, then there's no support; else you can add each css at a time to find out what is causing the issue – rafaelcastrocouto May 15 '19 at 15:13
  • I have IE 11 (Version:11.706.17134.0C0) in my system. I tried the url ; https://jsbin.com/zaxasamoxa/1/edit for both chrome and IE11 and did not see the expected response. – santosh kumar patro May 15 '19 at 18:50
  • So we can conclude that the support is inconsistent and you should find some kind of polyfil. Check out this answer's JS snippets https://stackoverflow.com/questions/4927257/text-overflowellipsis-in-firefox-4-and-ff5 – rafaelcastrocouto May 16 '19 at 11:13