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/