Previous Message
Next Message

wrapping long URLs

Sent by Ingo Chao on 17 May 2005 12:12

This is the background-image attempt.

Note that relatively short links (try with 20em in dd, or try with 
"l.html" as short link) will /not/ show the image ellipsis or the text 
ellipsis due to the mechanism

- no float drop
- r.p. upwardly
- overflow:hidden.

and long links /will/ show the ellipsis due to the mechanism

- float drop
- r.p. upwardly


I do not know anything about javascript. When I don't provide a script 
example, that should not read and does not imply that I question the 
fact that it belongs to be solved server sided or via javascript.

I just like thinking about if there are CSS solutions. Often these 
solutions are far away from being perfect. Same to the /awkward/ browser 
fixes I tried to find in some posts to this list the last year.

I think I'll try to spend more of my free time in gardening. Thanks for 
the audience.



    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 {
    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: red url(ellipsis.png);  /* red for debugging */
    width:25px;  /* any width will match */

    <dt>Name of the resource</dt>
       <a href=""
       <span class="ellipsis">&nbsp;</span>

css-discuss [EMAIL-REMOVED]]
List wiki/FAQ --
Supported by --
Previous Message
Next Message

Message thread: