Search
Another Stab at Truncated Text
3.9.2024
Seems like we’re always talking about clipping text around here. All it takes is a little browsing to spot a bunch of things we’ve already explored.
Article
on
Sep 19, 2012
Multi-line Text Overflow Ellipsis
accessibility content...
Recreating MDN’s Truncated Text Effect
28.7.2022
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 …
Recreating MDN’s Truncated Text Effect originally published...
Text-overflow: ellipsis considered harmful
30.6.2022
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
…
Text-overflow: ellipsis considered harmful originally...
Embracing Asymmetrical Design
20.9.2021
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 …
The post Embracing Asymmetrical Design...
Using Flexbox and text ellipsis together
22.7.2020
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 to truncate content in the middle?
Leonardo Faria details good use cases for this...
CSS Ellipsis Beginning of String
18.12.2018
I was incredibly happy when CSS text-overflow: ellipsis (married with fixed width and overflow: hidden was introduced to the CSS spec and browsers; the feature allowed us to stop trying to marry JavaScript width calculation with string width calculation and truncation. CSS ellipsis was also very...