This is an older post that did not make it through to the new site when I converted to WordPress. Hopefully this will still be relevant to someone out there.
CSS and the Long URL:
I was working on a webmail client a while back and had been having a few design problems. Sometimes when you subscribe to a blog, forum or usergroup the e-mails from those respective subscriptions will include an “unsubscribe url”. This Blog does. Now this URL can be really long and, in a normal email client (Outlook, Thunderbird etc) this is a non issue. But, writing a webmail client this became an issue.
In Firefox, if the url is longer than the width of the div area it would break my layout. In IE the long url would wrap to the next line as expected. The only Fix I could find for this was
#mail {
letter-spacing: normal;
vertical-align: top;
word-spacing: normal;
white-space: -moz-pre-wrap;
overflow: hidden;
word-wrap: break-word;
width: 765px;
}
The “white-space: -moz-pre-wrap” setting behaves the same as “pre”, with one exception, the line-wrapping control is returned to the browser when the browser needs it (such as the browser window boundary or something similar) Tabs, multiple spaces and existing line-feeds are also honored as well.
This didn’t completely fix my problem, it did preserve my layout but now the url extends past the boundary across other content. So, I added the “overflow: hidden” This addition is as close as I can find to make this work, with that added into the css property now anything that extends past my div boundary is hidden but the entire hyperlink is preserved.
If anyone knows of a better fix for firefox please feel free to leave a comment and let me know.
© 2009, Robert Owen. All rights reserved.
