Hover To View Hidden Text Overflow

When text must stay on one line, but there is not enough room for it all, here is a solution. A mouse hover can display text that doesn't otherwise fit on the line.

Sometimes, for design or other reasons, a line of text must remain as one line. It may not break into multiple lines.

The solution is pure CSS. No JavaScript. CSS properties overflow and text-overflow are used to implement the functionality.

The CSS Declarations

The CSS declaration white-space:nowrap; keeps all text on one line.

If there is more text than fits on the line, it will extend past the right side of the div or other container. We'll correct that.

One way to correct it is to reduce the font size of the text until it fits within the container. Which may make the text so small it is hard or impossible to read.

Another way to correct it is to use the CSS declaration overflow:hidden; to clip any text that extends past the right side of the container.

At this point, the class for the container with the one long line of text has these two CSS declarations:

white-space:nowrap; 
overflow:hidden;

Optionally, use the CSS declaration text-overflow:ellipsis; to print an elipsis where some of the text is clipped.

Now, the class for the container with the one long line of text has these three CSS declarations:

white-space:nowrap; 
overflow:hidden;
text-overflow:ellipsis;

Of course, merely clipping text is not a solution in most cases. If the text didn't need to be seen, it wouldn't have been put there in the first place.

However, there is a way so it can be seen when the mouse pointer hovers over the line of text. Use the overflow:visible; CSS declaration for the class' :hover selector.

An example incorporating the above CSS declarations follows.

An Example Implementation

When the mouse pointer hovers over the line below, the rest of the line is revealed.

When text must stay on one line, but there is not enough room for it all, this article provides a solution.

And here is the code for the example of the line above. Notes follow.

<style type="text/css">
.one-long-line {
   max-width:400px;
   white-space:nowrap; 
   overflow:hidden;
   text-overflow:ellipsis;
   }
.one-long-line:hover {
   overflow:visible;
   }
</style>

<p class="one-long-line">
When text must stay on one line, but there is not enough room for it all, this article provides a solution.
</p>

Code notes:

The class name "one-long-line" may be any class name that works for you.

In the above code, the red CSS declarations are required. The blue CSS declaration is optional.

Additional declarations may be added to the class.

Here is a note about each declaration in the above example code.

1. The .one-long-line selector –

   The max-width:400px; declaration is to ensure the container remains smaller than the amount of text (so there can be an example).

   The white-space:nowrap; declaration keeps all text on one line.

   The overflow:hidden; declaration hides any text that would otherwise extend past the right side of the container.

   The text-overflow:ellipsis; declaration prints an elipsis where some of the text is clipped.

2. The .one-long-line:hover selector –

   The overflow:visible; declaration makes the entire line visible when the mouse pointer hovers over the line.

The 3 required and 1 optional CSS definitions provide the functionality. If any of the text on the line of text is clipped, hovering over the line reveals it.

Will Bontrager