Previous Message
Next Message

wrapping long URLs

Sent by Ingo Chao on 17 May 2005 10:10


Paul Novitski schrieb:
> 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, I think you had a bright idea. I suggest implementing the ellipsis 
with an experimental float dropping method in your overflowed container, 
see code snippet below.

two situations:
- a short link:
the left floated link and the right floated ellipsis are computed 
side-by side, aligned at the same vertical height as floats do, /then/ 
the relative positioning moves the ellipsis one line up, but cannot be 
seen due to your overflow:hidden of the container.

- a long link:
the left floated link gets too wide and urges the ellipsis to drop into 
the second line. /Then/ the relative positioning moves the ellipsis one 
line up and sits nicely over the end of the truncated link.

Two fixes
IE: does not respect overflow:hidden for the r.p. offset span and shows 
it. Added position relative to its parent.

Opera7.54+8.01: The link will just wrap into the next line, no matter if 
its hidden or not by overflow, so that the float can drop into the third 
line, and r.p. will move it up into the second line, but will not show 
due to the overflow: hidden. Added white-space:nowrap.

Method seems to work in FF, IE5.5+, Opera7.54+8.01.

Mac tests please.

regards, Ingo


dd{
    width: 10em;            /* constrain width try 20em */
    height: 1em;            /* constrain height */
    line-height:1em;        /* to be adjusted */
    overflow: hidden;       /* hide excess */
    position:relative;      /* Fix IE missing overflow bug of r.p. span */
    background: yellow;     /* for demo */
    }

dd a {
    float:left;
    white-space: nowrap; /* prevents Opera's wrapping of the link and 
destroying the r.p. */
    }

dd span.ellipsis {
    float: right;      /* shall drop when the link is too long */
    position:relative; /* move after page flow is done */
    margin-top:-1em;   /* adjust */
    z-index:1;         /* higher layer */
    background: white; /* overpaint */
    }

</style>


</head>
<body>


    <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>
       <span class="ellipsis">&nbsp(...)</span>
    </dd>


______________________________________________________________________
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: