css ellipsis not working in IE

Question

text-overflow:ellipsis doesn't work on IE DOESNT SOLVE THE PROBLEM HERE. In this case -ms-text-overflow doesn't apply the ellipsis here.

Ellipsis not working in IE8 and 9. It seems -ms-text-overflow property is not doing anything.

<div class="client">
  <span class="client-name">Some Client Long Name</span>
</div>

.client {
  display: block !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  -ms-text-overflow: ellipsis !important;
  width: 170px !important;
  overflow: hidden;         
  word-wrap: normal !important;         
  float:left;    
  padding: 8px 10px 0px 10px;
}

.client-name {
  color: #AFAFAF;
  font-size: 20px;
  text-transform: uppercase;
}

Possible duplicate of [text-overflow:ellipsis doesn't work on IE](http://stackoverflow.com/questions/14664195/text-overflowellipsis-doesnt-work-on-ie) — Scott, Jun 30 '16 at 20:45
and: http://stackoverflow.com/questions/13257991/cannot-get-ellipsis-on-a-link-text-in-ie9-and-ie8 — Scott, Jun 30 '16 at 20:45
what's duplicated?, i've already read that post and it used the -ms-text-overflow property too. — Guille, Jun 30 '16 at 20:48
you should apply the text-overflow to the span to be coherent. of course some css has to migrate down to it ... just keep the float for .client rest goes to the span — G-Cyrillus, Jun 30 '16 at 20:51
GCyrillus, i'm sorry you were right, i've kept only the float and width in client, it works correct now in IE. THANKS! — Guille, Jun 30 '16 at 21:03

score 0 · Answer 1 · edited May 23 '17 at 11:52

0

In this link is answer, for me worked like a charm in IE9: https://stackoverflow.com/a/13260224/1064818

Rule above is correct

text-overflow: ellipsis;

edited May 23 '17 at 11:52

Community

1
1

answered Jun 30 '16 at 21:01

Hiszpan

116
8

score 0 · Answer 2 · answered Jun 30 '16 at 21:07

This works in IE8:

.client {
  float:left; 
  padding: 8px 10px 0px 10px;  
  width: 170px !important;
}

.client-name {
  display: block !important;
  white-space: nowrap !important;           
  overflow: hidden;         
  word-wrap: normal !important;
  text-overflow: ellipsis !important;
  -ms-text-overflow: ellipsis !important;
  color: #AFAFAF;
  font-size: 20px;
  text-transform: uppercase;
}

css ellipsis not working in IE

2 Answers2