Text Truncation in CSS: Learn Single and Multiple Line Truncation with Easeby@briantreese
105 reads

Text Truncation in CSS: Learn Single and Multiple Line Truncation with Ease

by Brian Treese3mFebruary 16th, 2024
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

With CSS we have the `text-overflow` property that we can use any time we want to truncate a single line of text. We can do this with a handful of properties and the webkit’s `preferences` property. Here we look at an example of how to use the text- overflow property to get multiple lines of text truncated.
featured image - Text Truncation in CSS: Learn Single and Multiple Line Truncation with Ease
Brian Treese HackerNoon profile picture
Brian Treese

Brian Treese

@briantreese

Hello I'm the Chief of UX at SoCreate. I build things for the web daily & write about the stuff I use/discover/encounter

STORY’S CREDIBILITY

Guide

Guide

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

L O A D I N G
. . . comments & more!

About Author

Brian Treese HackerNoon profile picture
Brian Treese@briantreese
Hello I'm the Chief of UX at SoCreate. I build things for the web daily & write about the stuff I use/discover/encounter

TOPICS

THIS ARTICLE WAS FEATURED IN...

Permanent on Arweave
Read on Terminal Reader
Read this story in a terminal
 Terminal
Read this story w/o Javascript
Read this story w/o Javascript
 Lite
Also published here