Ellipses that do not appear when text overflows
I have a headline:
<h2><a href="#">Lorem ipsum dolor dumbledore at hogwarts</a></h2>
I am trying to crop text on multiple lines if it exceeds the height h2:
h2 {
width: 200px;
height: 52px;
overflow: hidden;
text-overflow: ellipsis;
}
What I expect:
Lorem ipsum dolor
dumbledore at...
What was the result
Lorem ipsum dolor
dumbledore at
Why is the ellipse not displayed?
When I add white-space: nowrap;, an ellipsis is displayed, but the text is h2now single-line rather than occupying the entire height h2.
Lorem ipsum dolor...
+5
2 answers
You can do this with some modern CSS tricks, see jsfidle example
body{padding: 4em;}
h3{border:2px solid red;padding:.5em;}
h3 {
display: block; /* Fallback for non-webkit */
display: -webkit-box;
max-width: 400px;
height: calc(26px*1.4*4); /* Fallback for non-webkit */
margin: 0 auto;
font-size: 26px;
line-height: 1.4;
-webkit-line-clamp:4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
<h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. </h3>
+2