Development and UX from Michael Mahemoff. Maker of Player FM. Previously: Google, BT, O'Reilly author. Also thesis papers.

Menu

Amazon’s Pure CSS Solution to Avoid Cutting Off Text

Amazon is using a nice CSS trick to truncate a text block without showing half-lines (like someone cut the document horizontally). The problem is that CSS “overflow: hidden;” is a crude creature that will brutally cut lines off halfway through like a 1970s dot-matrix printer. There’s no “overflow hidden, but jeez be gentle about it okay” property. So this is a workaround, but it does impose a change on the UI…the fading text on the bottom.

Using Devtools for the image below, I’ve enhanced the mask with outline and gradient colour, and also filled the block with text to build a continuous paragraph on the bottom.

There’s a semi-transparent gradient mask in front of the content. The mask is mostly clear, but has a white band on the bottom 15%. This band is turquoise for illustration purposes here. So this bottom band covers up text on the next line without occupying too much whitespace. You’ll notice the band starts where the bottom line ends. So the bottom line is already fading, and then BOOM! It’s all white below that.

The mask is 50 pixels, so there will be about 45 pixels (85% of 50px) transition from full text to fully-transparent text, followed by about 5 pixels of white.

A side note is the layout technique for the mask. Probably basic for most CSS designers, but not how I would have done it. It’s simply using standard flow, but with position: relative to shift the mask up 50px, and a 50px negative margin to ensure the mask doesn’t actually affect the flow. (I would have done it by making the whole thing position relative, and absolute elements inside it. This technique is much simpler.)

Update: Syd Lawrence points out that it’s worth using pointer-events: none on the mask. This is the CSS property that makes the front layer porous, allowing mouse clicks to cheekily slip through to the element behind it.

G’Day

Welcome to Michael Mahemoff's blog, soapboxing on software and the web since 2004. I'm presently using HTML5 and the web to make podcasts easier to share, play, and discover at Player FM. I've previously worked at Google and Osmosoft, and built the Ajax Patterns wiki and corresponding book, "Ajax Design Patterns" (O'Reilly 2006).
For avoidance of doubt, I'm not a female, nor ever have been to my knowledge. The title of this blog alludes to English As She Is Spoke, a book so profoundly flawed it reminded me of the maturity of the software industry when this blog began in 2004. I believe the industry has become more sophisticated since then, particularly the importance of UX.
Follow @mahemoff