Re: [css-d] wrapping long URLs

Ingo Chao Tue, 17 May 2005 02:07:03 -0700

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 PROTECTED]
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/

Re: [css-d] wrapping long URLs

Reply via email to