A post published over at Quick Online Tips yesterday reminded me of a problem I used to face over at one of my blogs: Long words and URLs breaking my layout. What happens is that when a very long word is written in a post or comment (longer than its container), it pushes down any container next to it (such as your sidebar). Of course, in more tolerant browsers such as Firefox, the long word will overlap onto the adjacent container to keep the layout unbroken.

But let’s not forget a large number of users still use Internet Explorer, so why not solve the problem once and for all? There are several solutions to this. I’ll try to list those that I know of for WordPress.

General Solutions:

1. Use the Force Word Wrapping Plugin
   WordPress users have a simple solution to the problem. Just use this plugin and your post content and comments will have their long words wrapped. Since I don’t use this plugin, however, I’m not sure whether it works in WordPress 2.0+.
2. Using overflow:hidden
   By applying the overflow:hidden tag onto your container div (whether comment or post containers) in your CSS file, any characters that exceed your container’s width will be hidden. Full URLs can still be copied even though they are displayed in truncated form, so you won’t have to worry about URLs breaking. But since the preferred method is still word (or rather, character) wrapping, use overflow:hidden only if all else fails. Note: Since this is a CSS workaround, any blog/site (not only WP users) can take advantage of it.

In most cases, you’ll know when you’re writing a long word and will adjust your post content accordingly to prevent the problem. So, most of the time, you’ll find this problem occuring in your comments, or more likely, in your Recent Comments list. Thankfully, modern Recent Comments WP plugins have character wrapping built-in, so just make sure you are using them.

I’m sure these solutions aren’t exhaustive, nor will they work for everyone. If I missed anything, feel free to comment below or send me an e-mail.

Edit: If the Force Word Wrapping plugin highlighted above doesn’t work, check out a manual solution (i.e. pure code) over at the WordPress support forum.

If you found this post useful, keep updated with future posts by subscribing to blogHelper (for free) through RSS or email.