Sent by Ingo Chao on 17 May 2005 13:01
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"> </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/
