Posts Tagged CSS

Ever had a situation where you are dealing with long unbroken strings? For example, say you have to display user-entered web URLs. Sometimes the user will paste in a really long URL, and it keeps overflowing the container. You can make the parent container overflow: hidden but then it will crop the URL. A potentially better solution is to force the browser to introduce line-breaks mid-word.

This has always been difficult to achieve cross-browser until now. Unlike most cross-browser quirks, this was one where Interenet Explorer actually had it right. Since IE 5.5, you have been able to use word-wrap: break-word to cause this behavior. Now, finally, Firefox has caught on. As of version 3.5, Firefox now supports this CSS property as well.

Here is the recommended code to cause this behavior:

white-space: pre-wrap; /* css-3 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ and Firefox 3.5+ */

Source: UnBlog