Software, your way.
How To Get Good Custom Software
(Download)
(PDF)
burger menu icon
WillMaster

WillMaster > LibraryWebsite Development and Maintenance

FREE! Coding tips, tricks, and treasures.

Possibilities weekly ezine

Get the weekly email website developers read:

 

Your email address

name@example.com
YES! Send Possibilities every week!

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

Was this article helpful to you?
(anonymous form)

Support This Website

Some of our support is from people like you who see the value of all that's offered for FREE at this website.

"Yes, let me contribute."

Amount (USD):

Tap to Choose
Contribution
Method

All information in WillMaster Library articles is presented AS-IS.

We only suggest and recommend what we believe is of value. As remuneration for the time and research involved to provide quality links, we generally use affiliate links when we can. Whenever we link to something not our own, you should assume they are affiliate links or that we benefit in some way.

How Can We Help You? balloons
How Can We Help You?
bullet Custom Programming
bullet Ready-Made Software
bullet Technical Support
bullet Possibilities Newsletter
bullet Website "How-To" Info
bullet Useful Information List

© 1998-2001 William and Mari Bontrager
© 2001-2011 Bontrager Connection, LLC
© 2011-2024 Will Bontrager Software LLC