CODEWITHSUNDEEP
htmlcssinternet-explorercross-browser
ijb109
ijb109

Reputation: 972

text-overflow: ellipsis doesn't work after line break in Internet Explorer

I have a problem with text-overflow: ellipsis not working in Internet Explorer when there is text separated by a line break.

In Firefox and Chrome, both lines of text get truncated with an ellipsis. In Internet Explorer, the first line gets truncated with the ellipsis and the second line just truncates on the right.

Here is my code:

.text-wrapper {
  border: solid 1px #C2C2C2;
  padding:10px;
}
.text-wrapper p{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
<div class="text-wrapper" style="width:250px;">

    <p>
      This line overflows and gets an ellipsis in any browser. 
      <br/>
      This line overflows and gets an ellipsis in any browser except IE.
    </p>

</div>

Upvotes: 3

Views: 2993

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371143

With text-overflow, ellipsis can be applied to a single line of text.

The following CSS requirements must be met:

  • must have a width
  • must have white-space: nowrap
  • must have overflow with value other than visible
  • must have display: block or inline-block

It would appear that IE is actually rendering the ellipsis correctly: The second line should not have ellipsis. This makes it multi-line in effect, violates the intention of nowrap, and ellipsis should fail.

The fact that Chrome and Firefox render the ellipsis after line breaks is possibly an implementation difference they've taken upon themselves.

One workaround would be to create new paragraphs instead of line breaks.

For ellipsis on multi-line text consider these options:

Upvotes: 5

Related Questions