Reveal truncated text restricted to one line with hover effect

In another snippet, I discussed why you might want to truncate a text block to perserve a layout. Often text is restricted to a single line and truncated. Something that is often overlooked is giving users a way to see the entire text content!

We can add a hover effect to let the text content wrap over multiple lines.

.truncate {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.truncate:hover {
  overflow: visible;
  white-space: normal;
}

Demo

Explanation

For the hover effect, we allow the text to overflow through overflow: visible. We remove the restriction on text wrapping through white-space: normal.