CODEWITHSUNDEEP
csscross-browserinternet-explorer-10ellipse
user2625152
user2625152

Reputation: 517

text-overflow: ellipsis is not working on IE10

p.details {
    font-size:     12px;
    color:         #6D6D6D;
    white-space:   nowrap;
    width:         100%;
    overflow:      hidden;
    text-overflow: ellipsis;
    max-height:    3.6em;
    line-height:   1.8em;
    min-height:    3.6em;
}

the above css works fine on chrome, firefox, safari except for IE10. it's supposed to have a "..." behind the sentence if it's too long.

For example: "These are the details of the ..." instead of "These are the details of the promotion items"

Please help!

New update: i've removed word-wrap: break-word and it worked for the first line. the subsequent line(s) won't work. For example: 

<p class = "details">"- Sentence 1" <br> "- Sentence 2" </p>

This will produce:

Senten...
Sentence

Upvotes: 1

Views: 1699

Answers (2)

Kumar
Kumar

Reputation: 417

IE10 doesnt like the br tag for Ellipsis. Instead try using a new div for new line feeds and it will start woirking. Like this

"- Sentence 1" "- Sentence 2"

Upvotes: 0

Itay
Itay

Reputation: 16777

Remove the following line from your styling:

word-wrap:     break-word;

Upvotes: 2

Related Questions