Previous Message
Next Message

wrapping long URLs

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/
Previous Message
Next Message

Message thread: