Skip to main content
CSS-Tricks
  • Articles
  • Alamanac
  • Guides
  • Videos
  • Books
  • Newsletter
Search

Articles Tagged
truncation

5 Articles
{
,

}
Direct link to the article Recreating MDN’s Truncated Text Effect
data loss mdn text-overflow truncation

Recreating MDN’s Truncated Text Effect

It’s no secret that MDN rolled out a new design back in March. It’s gorgeous! And there are some sweet CSS-y gems in it that are fun to look at. One of those gems is how card components handle truncated …

Avatar of Geoff Graham
Geoff Graham on Jul 28, 2022
Direct link to the article Weekly news: Truncating muti-line text, calc() in custom property values, Contextual Alternates
custom properties line-clamp opentype truncation

Weekly news: Truncating muti-line text, calc() in custom property values, Contextual Alternates

In this week's roundup, WebKit's method for truncating multi-line text gets some love, a note on calculations using custom properties, and a new OpenType feature that prevents typographic logjams.
Avatar of Šime Vidas
Šime Vidas on Jul 25, 2019
Direct link to the article line-clamp
line-clamp truncation

line-clamp

The line-clamp property truncates text at a specific number of lines.

The spec for it is currently an Editor’s Draft, so that means nothing here is set in stone because it’s a work in progress. That said, it’s defined as …

Avatar of Geoff Graham
Geoff Graham on Apr 27, 2018 (Updated on Aug 17, 2019)
Direct link to the article Line Clampin’ (Truncating Multiple Line Text)
line-clamp truncation

Line Clampin’ (Truncating Multiple Line Text)

You want X lines of text. Anything after that: gracefully cut off. That’s “line clamping” and it is a perfectly legit desire. When you can count on the text being a certain number of lines, you can create stronger and …

Avatar of Chris Coyier
Chris Coyier on May 7, 2013 (Updated on Oct 1, 2021)
Direct link to the article Truncate String with Ellipsis
ellipsis text-overflow truncation

Truncate String with Ellipsis

All the following are required, so the text must be in a single straight line that overflows a box where that overflow is hidden.

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
CodePen Embed Fallback

Note the …

Avatar of Chris Coyier
Chris Coyier on Feb 18, 2011 (Updated on Sep 30, 2022)

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways hosting
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Write for us!
  • Advertise with us
  • Contact us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • X
Back to Top