🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Line Clamping (Cross-Browser, Pure CSS)

This is a cross-browser (pure CSS) solution that will clamp text to X number of lines with a trailing ellipsis in Webkit browsers. The height property is used on other browsers (along with a fading text effect) as a graceful fallback in non-Webkit browsers. The use of CSS calc allows for any font-size to work properly; i.e. you don't need a fixed height or a fixed font size for this to work! Play with it :-) You can change the second class to line-clamp-[1|2|3|4|5] and experiment with this just a little.

Text Animation

Demo Tutorial

See the Pen by jaswrks (@jaswrks) on CodePen.

This awesome script developed by jaswrks. Visit their official repository for more information and follow for future updates.

You May Also Like

Typewriter text effect with GSAP

CSS Text Effects

Wave text effect (with SVG/blend mode)

CSS3 blur text effect

Cascading text effects w/ Splitting + ScrollOut ??????

"Draw In" Text Effect with Decovar

Vintage Text Effect

Text Effect - Optimist

Layered text effect bubble look

Cascading text effects ??????????

SVG text effect

Shining Text Effect CSS3

inner shadow text effect

Bended Text Effect

Shatter Text Effect

Multi-coloured layered blended text effect

GSAP Text Animation

Letter Drop Text Effect

Text effect with blend modes: Swiss design

3d hover text effect

Awkward Zebra Text Effect

SVG text effect

Simple text effect

Line Clamping (Cross-Browser, Pure CSS)

Gold CSS Text Effect with Gradients

(cool) text effect

Dynamic text effect for Cryca

In/out of focus text effect

A collection of CSS text-shadow and pattern effects

Fly in, fly out

Refracted Floating Text Effect

Text Effect (SVG & CSS)

Opening Sequence

Silent Movie Text Effect

Spotty layered CSS text effects

CSS-only shimmering neon text

3D Text Effect + Ambient light

CSS Blend Mode Text Effect

Code cracking text effect

CSS3 Horror Style Text Effect

Matrix Text Effect

3D Cuboid Text Effect ?

Neon Text Effect

Stripy Rainbow Text Effect

CSS Shimmer Text Effect

Text Effect - Mystique

Movie Credits Letter Effect Slideshow

CodePen Text Effect

Lines and layered css text effects

Page layout text effects with clip-path

#21 - Typing text effect with CSS only

Filling text effect

Split emoji text effect with css

Hit The Floor Text Effect

Black Mirror Cracked Text Effect

Single element, multi coloured 3d text effect

CSS3 Isometric Text Effect created by Duncan Midwinter.

Bubbling Text Effect

Futuristic Resolving/Typing Text Effect feat. GLaDOS

Realistic Text Effect (updated, simple version)

Flickering Light Text Effect

Terminal Text Effect

Foggy text effect

jQuery Plugins

AngularJs Plugins