CSS 3 · Positioning, effects and animation
Limit text to a number of lines
Show at most three lines, then an ellipsis.
.excerpt {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
More positioning, effects and animation commands
- Stick an element while scrolling
- Cover the parent
- Crop an image to fit its box
- Truncate text with an ellipsis
- Animate a change smoothly
- Create an animation
All positioning, effects and animation commands · CSS 3 cheatsheet