Sent by Paul Novitski on 17 May 2005 08:08
At 05:59 PM 5/16/2005, Christy Collins wrote:
>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-REMOVED]]
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/
