Previous Message
Next Message

wrapping long URLs

Sent by Paul Novitski on 17 May 2005 17:05


Ingo,

Thanks for taking my impulse and figuring out how to pull it off in 
CSS!  Good thinking.

Christian, thanks also for your good js solution to the same problem.  I 
love working with javascript, but these days I try to avoid using it for 
anything crucial on a page since I have increasingly less assurance that 
visitors have it turned on.  If I can accomplish approximately the same 
thing in both technologies, I prefer to use the CSS method.

Regards,
Paul


At 05:09 AM 5/17/2005, Ingo Chao wrote:
>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.
>
>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: red url(ellipsis.png);  /* red for debugging */
>    width:25px;  /* any width will match */
>    }
>
>
>    <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/


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