The use of the vendor prefix -webkit indicates specificity to the webkit engine, which is not used by IE, resulting in non-functionality.
To achieve the desired outcome, adjust the line-height and utilize line-height adjustments, along with adding overflow: hidden;.
With overflow set to hidden, content exceeding div dimensions will be truncated:
An effective example:
.parent {
font-size:16px;
height: 36px; /* 2x "font-size" +4px clearing */
line-height: 36px; /* should match your parent div height */
width: 90%;
overflow: hidden;
margin-top: 20px;
}
.child {
display: inline-block;
vertical-align: middle;
line-height: normal; /* reset line height here it here */
}
<div class="parent">
<div class="child">
Lorem ipsum dolor sit amet, cu ancillae expetendis ius, pro reque laudem facilisis in, dicta euismod qui eu. No pri graecis similique, ei vim nobis veritus argumentum, platonem torquatos vituperata eum eu. Mel purto eros legendos id, saepe laudem at qui,
te eum semper interesset. Has id admodum deleniti, eu sumo iisque noluisse ius, vix facer partiendo temporibus ut. In civibus consetetur cum, quo atqui omnium periculis ne. Vim nullam nemore ut.
</div>
</div>
Another approach involves utilizing a reset HTML textarea element:
Successful implementation:
textarea {
all: unset;
width: 100%
}
.sample {
overflow: hidden;
max-width: 80%;
overflow: ellipsis;
}
<textarea class="sample" rows="2">
Lorem ipsum dolor sit amet, cu ancillae expetendis ius, pro reque laudem facilisis in, dicta euismod qui eu. No pri graecis similique, ei vim nobis veritus argumentum, platonem torquatos vituperata eum eu. Mel purto eros legendos id, saepe laudem at qui,
te eum semper interesset. Has id admodum deleniti, eu sumo iisque noluisse ius, vix facer partiendo temporibus ut. In civibus consetetur cum, quo atqui omnium periculis ne. Vim nullam nemore ut.
</textarea>
Unfortunately, neither method supports the use of ellipsis or "..."
It appears that achieving ellipsis and overflow together solely through CSS without relying on hacks or scripts may not be feasible.
One such hack involves pseudo-elements (suitable only for justified text):
.sample {
max-width: 80%;
overflow: hidden;
position: relative;
max-height: 2.2em;
text-align: justify;
padding-right: .75em;
}
.sample:before {
content: "...";
position: absolute;
right: 0;
bottom: 0;
}
<div class="sample">
Lorem ipsum dolor sit amet, cu ancillae expetendis ius, pro reque laudem facilisis in, dicta euismod qui eu. No pri graecis similique, ei vim nobis veritus argumentum, platonem torquatos vituperata eum eu. Mel purto eros legendos id, saepe laudem at qui,
te eum semper interesset. Has id admodum deleniti, eu sumo iisque noluisse ius, vix facer partiendo temporibus ut. In civibus consetetur cum, quo atqui omnium periculis ne. Vim nullam nemore ut.
</div>