I’m slowly plodding along to XHTML 1.0 Strict sitewide, in a happy little idealistic attempt to later move to 1.1 and join the growing list of X-Philes. Evan Goer and Jacques Distler are fantastic resources on this stuff by the way (update: and I can’t believe I missed Anne Van Kesteren), but this is all background for you.
In my process I’ve dropped XHTML formatting from my comments and added auto-links for URIs since I can’t be bothered messing around with comment validation and the like. But this is still background.
The problem is, or was, this: auto-links to long URIs would break my layout. In Firebird they would run into the right-hand column, in IE they would do the same and they would push the right-hand sidebar down below my content area.
So the other day I’d had enough of feeling helpless about this problem, and luckily CSS offers a few ways out. After some experimenting with the CSS-2 property
overflow: auto; on each comment block (
.comments-body) I finally ended up using
overflow: hidden; Any URIs longer than so get chopped at the right of the comment block, the magic number being around 60 characters. Why
hidden instead of
auto? After all, the latter would add scrollbars, ensuring truncation doesn’t occur.
But the more I thought about it, the more I realized that truncation was exactly what I wanted. URIs are the only bits of text within
.comments-body that could possibly be affected, so why not truncate? It’s cleaner looking, enough of the link shows up for the user to get the idea, and they’ll still get the full URI in the status bar. Otherwise I’d have to live with ugly vertical and horizontal scroll bars in any comment block that needed them, and that just looked odd.
Which just goes to show that there’s always more than one way to tackle a problem.