F-F-F-Fade Away Text …

My favorite way to trim a text element is to fade it away the at end instead tailing it with ellipses. . . because the approach is a more subtle invitation to click for more information and it’s simple to do without a lot of code.

In a responsive app design, the height of an HTML tag containing text will vary as the text wraps to fill the available display width. When a number of these tags are placed side by side in a grid, the different text content lengths can cause the tag container heights to vary.

The tag

p {
  font-size: 0.825rem;
  height: 7rem;
  line-height: 1.5;
  overflow: hidden;
  position: relative;
}

The ::after pseudo element

p:after {
  background: -webkit-gradient(linear, left top, right top,from(rgba(255, 255, 255, 0)), to(white), color-stop(90%, white));
  background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 90%, white);      
  background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 90%, white);
  background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 90%, white);
  background: linear-gradient(to right, rgba(255, 255, 255, 0), white 90%, white);
  bottom: 0;
  color: transparent;
  content: "\02026"; 
  font-size: 0.825rem;
  position: absolute;
  right: 0;
  width: 12rem;
  /*
  background-size: 100% 100%;
  box-sizing: content-box;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  */
}
  • Overflow cuts off extra text.
  • Position-relative sets the container for the position absolute, bottom and right to place the ::after pseudo element.
  • Content activates the pseudo element.
  • Background sets the transparency curve and color, while width sets the gradient length (assumes IE10+)
  • Match tag and pseudo element fonts, and coordinate font-size, height and line-height settings for cleanly cutting the chosen number of lines.
  • Add margin and padding to taste.
  • Add background-size and box-sizing if needed.

Here’s an example of a card suitable for a grid with fade away applied to heading and paragraph tags.