Recently at work, our awesome QA guy Paul found that a long, unbroken string of characters would often break the layout of our one of our products — a custom website-building tool called WeConnect. With WeConnect, our customers log in and use our CMS to create their own custom website. They can fill out information about their organization, as well as publish pages, blog posts, and much more.
The problem:
Users could potentially add a long, unbroken string of text (most likely a URL) and the text could break out of it’s container and really mess up the layout.
Example of an unbroken string breaking the layout
As a rule, we limit our input fields to to 65,000 characters.
Our solution for now:
* {
word-wrap: break-word
}
The asterisk (*) CSS selector tells word-wrap: break-word to be applied to every element, thereby covering any possible area on the site where an unbroken string could break the layout.
Some concerns
My hesitation with this approach is that, by applying this global change, we could potentially cause long words to break in improper places. Our plan is to test it for several months and see if we see any negative effects.
In the future, I plan to write a follow up and report our findings. In the mean time, feel free to comment and let me know if you’ve had any issues with this approach.