Menu
I have a title:
<h2><a href="#">Lorem ipsum dolor dumbledore at hogwarts</a></h2>
I'm trying to truncate the text on multiple lines if it exceeds the height of h2:
h2 {
width: 200px;
height: 52px;
overflow: hidden;
text-overflow: ellipsis;
}
What I'm expecting:
Lorem ipsum dolor
dumbledore at...
What the result was
Lorem ipsum dolor
dumbledore at
Why isn't the ellipsis showing?
When I add white-space: nowrap; the ellipsis shows but the text of h2 is now a one-liner instead of occupying the whole height of h2.
Lorem ipsum dolor...
802
Inline overflow occurs when the text in a line overflows the available width without a breaking opportunity. To force overflow to occur and ellipses to be applied, the author must apply the nowrap value to the white-space property on the element, or wrap the content in a <NOBR> tag.
The text-overflow property in CSS deals with situations where text is clipped when it overflows the element's box. It can be clipped (i.e. cut off, hidden), display an ellipsis ('…', Unicode Range Value U+2026) or display an author-defined string (no current browser support for author-defined strings).
A text-overflow property in CSS is used to specify that some text has overflown and hidden from view. The white-space property must be set to nowrap and the overflow property must be set to hidden. The overflowing content can be clipped, display an ellipsis ('…'), or display a custom string.
To make an ellipsis work on a table cell, you can use the CSS display property set to its "block" or "inline-block" value. In our example below, besides the display property, we set the text-overflow to "ellipsis", use the "nowrap" value of the white-space property, set the overflow to "hidden".
You can do it with some modern css trickery 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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
