CSS to force long text and urls to wrap on all browser

Shailendra Chauhan  Print   1 min read  
23 May 2012
14 Jul 2012
Intermediate
21.1K

Sometimes we need to wrap a long text and url forcefully. Without word wrap our design layout become awkward. So to do proper alignment of text, we need to wrap text. We can force a long or continuous text to wrap in a new line by defining css word-wrap property to break-word. Word-wrap is supported in all browsers like IE 5+, FF 3.5+, and Safari, Opera etc.

Cross browser CSS to wrap long text and urls

 .wordwrap
{
/* wrap long text and urls */
white-space: pre; /* CSS 2.0 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3.0 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -moz-pre-wrap; /* Mozilla */
word-wrap: break-word; /* IE 5+ */
} 

Text without word wrap

http://www.dotnet-tricks.com_article_conating_a_very_long_url_text_is_here

aasddddddddddsffffffffffffffffffffdgfffffffffffffffffffffffffffjhhhhhhhhhhh

Text with word wrap

http://www.dotnet-tricks.com_article_conating_a_very_long_url_text_is_here

aasddddddddddsffffffffffffffffffffdgfffffffffffffffffffffffffffjhhhhhhhhhhh

Summary

In this article I try to explain, how you can wap a long string using css with a simple example. I hope after reading this article you will be able to use this trick in your code. I would like to have feedback from my blog readers. Please post your feedback, question, or comments about this article.

Learn to Crack Your Technical Interview

 
Learn to Code

Start your journey today to learn coding!


Because learning to code is the first step and foreward to advance your career.


 GET STARTED NOW