On a responsive web page, text heights grow as their width narrow. When needing visually consistent containers, setting the text height to a fixed number of lines can leave words hanging mid-sentence. Fading these words out is one way to gracefully suggest there's more to read, and it is easy to do using plain HTML and CSS.

In the above container, both the title and description are set to fade away. The text height will always be the same, but more text will show as the width expands.

Element CSS

  • Adjust font-size, line-height and height as needed.
  • Cut of extra text with overflow cuts off extra text.
  • Sets the pseudo element context with position-relative.
p {
    font-size: 1rem;
    height: 6rem;
    line-height: 1.5;
    overflow: hidden;
    position: relative;
}

Pseudo element CSS

p:after {
  background: linear-gradient(to right, rgba(255, 255, 255, 0), white 90%, white);
  bottom: 0;
  color: transparent;
  content: "\02026"; 
  font-size: 1rem;
  position: absolute;
  right: 0;
  width: 12rem;
}
  • Set the background transparency curve, color and direction.
  • position the pseudo element in the absolute bottom right corner of the parent element.
  • Set text color to transparent.
  • Activate the pseudo element with content.
  • Make pseudo element font-size same as parent element.
  • Set width of gradient (assumes IE10+)