Skip to main content
CSS-Tricks
  • Articles
  • Videos
  • Almanac
  • Newsletter
  • Guides
  • DigitalOcean
  • DO Community
Search

Articles Tagged
text-overflow

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 Text-overflow: ellipsis considered harmful
data loss text-overflow

Text-overflow: ellipsis considered harmful

Direct Link

Eric Eggert:

There are a few legitimate use cases for this technique. For example, you might have a table with titles and descriptions. To preserve more space for the title, you constrain the description to one line on small

…
Avatar of Geoff Graham
Shared by Geoff Graham on Jun 30, 2022
Direct link to the article Embracing Asymmetrical Design
grid line-clamp overflow text-overflow

Embracing Asymmetrical Design

Direct Link

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
Shared by Chris Coyier on Sep 20, 2021
Direct link to the article Using Flexbox and text ellipsis together
ellipsis overflow text-overflow

Using Flexbox and text ellipsis together

Direct Link

You can truncate a single line of text with an ellipsis (…) fairly easily with text-overflow and a few friends. But, as you might expect, that truncation happens at the end of the line of text. What if you want …

Avatar of Chris Coyier
Shared by Chris Coyier on Jul 21, 2020
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
  • DigitalOcean
  • DigitalOcean Community
  • About DigitalOcean
  • Legal
  • Free Credit Offer
CSS-Tricks
  • Email
  • Guest Writing
  • Book
  • Advertising
Follow
  • Mastodon
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • iTunes
  • RSS
Back to Top