Is there a CSS way to make long URLs wrap?
Recently I approached this problem in a different way than I had before: rather than figure out how to include the entire longCrazyUrl onto the page, I decided to let it be partially hidden. My rationale is that most of the time people just need to navigate to an URL; the few that need to read or copy & paste the URL can easily do so through the browser user interface: mouse-hovering to get the title tooltip or right-clicking to get the link location.
My links page markup was a definition list:
<dt>Name of the resource</dt>
<dd>
<a href="http://longcrazyurl.net/blah/de/blah/de/blah.html";
title="longcrazyurl.net/blah/de/blah/de/blah.html">
longcrazyurl.net/blah/de/blah/de/blah.html
</a>
</dd>styled as:
dd
{
width: 30em; /* constrain width */
height: 1.5em; /* constrain height */
overflow: hidden; /* hide excess */
}So it might render like this:
Name of the resource
longcrazyurl.net/blah/de/bla
______________________________I'm still trying to come up with a further improvement: I'd like an ellipsis (...) to appear at the right-hand edge of the container when the contents are truncated but not when they fit.
Doing the opposite is easy: I can display an image at the right edge that's covered up by long text and not by short text.
Any suggestions?
Paul
______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
