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

Articles Tagged
line-clamp

8 Articles
{
,

}
Direct link to the article Embracing Asymmetrical Design
grid line-clamp overflow text-overflow

Embracing Asymmetrical Design

I’ll never forget one of Karen McGrane’s great lessons to the world: truncation is not a content strategy. The idea is that just clipping off text programmatically is a sledgehammer, and avoids the kind of real thinking and planning that …

Avatar of Chris Coyier
Chris Coyier on Sep 20, 2021
Direct link to the article Multiline truncated text with “show more” button
line-clamp

Multiline truncated text with “show more” button

Now that we’ve got cross-browser support for the line-clamp property, I expect we’ll see a lot more of that around the web. And as we start to see it more in use, it’s worth the reminder that: Truncation is not …

Avatar of Chris Coyier
Chris Coyier on Sep 4, 2019
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 Multi-Line Truncation with Pure CSS
line-clamp

Multi-Line Truncation with Pure CSS

The trick in this article is still pretty neat and clever, but there is a now-standardized way to do this which is probably your best bet.

Truncating a single line of text if is fairly straightforward. Truncating multiple lines …

Avatar of Chris Coyier
Chris Coyier on Jul 17, 2019 (Updated on Oct 23, 2021)
Direct link to the article max-lines
line-clamp

max-lines

The max-lines property limits the content of a block to a maximum number of lines before being cut off and can create a line clamping effect when combined with block-overflow. In fact, both properties make up the line-clamp property, …

Avatar of Geoff Graham
Geoff Graham on May 18, 2018
Direct link to the article block-overflow
line-clamp

block-overflow

The block-overflow property truncates text and indicates more content follows by inserting an ellipsis or custom string after a number of lines that is set by the max-lines property.…

Avatar of Geoff Graham
Geoff Graham on May 17, 2018 (Updated on Dec 28, 2021)
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)

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