Please enable Javascript to correctly display the contents on Dot Net Tricks!

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

  Author : Shailendra Chauhan
Updated On : 14 Jul 2012
Total Views : 14,179   
 

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.


YOU MIGHT LIKE
Free Interview Books
 
COMMENTS (0)
13 FEB
ASP.NET Core Development (online)

07:00 AM-09:00 AM IST( MON, WED, FRI)

Know More
25 JAN
Angular2 and Angular1 Development (online)

09:00 PM-10:30 PM IST(MON-FRI)

Know More
24 JAN
ASP.NET MVC with Angular2 Development (online)

07:00 AM-09:00 AM IST(Tuesday & Thursday)

Know More
20 JAN
NODEJS & MEAN Stack 2 Development (online)

09:00 PM-11:00 PM IST( MON, WED, FRI)

Know More
15 JAN
PPC Marketing (offline)

04:00 PM-05:300 PM

14 JAN
Xamarin Forms : Build Cross-platform Apps (offline)

05:00 PM-06:30 PM IST

10 JAN
ASP.NET MVC with AngularJS Development (online)

09:00 PM-11:00 PM IST on (TUE, THRU,SAT)

3 JAN
ASP.NET MVC with AngularJS Development (online)

07:00 AM-09:00 AM IST

31 DEC
ASP.NET MVC with AngularJS Development (offline)

09:30 AM-11:00 AM

31 DEC
Angular2 and Angular1 Development (offline)

11:00 AM-12:30 AM

26 NOV
ASP.NET MVC with AngularJS Development (offline)

03:00 PM-04:30 PM

5 NOV
ASP.NET MVC with AngularJS Development (offline)

08:00 AM-09:30 AM

4 SEP
MEAN Stack 2 Development (offline)

11:00 AM-12:30 PM.

BROWSE BY CATEGORY
 
RECENT ARTICLES
SUBSCRIBE TO LATEST NEWS
 
LIKE US ON FACEBOOK
 

Professional Speaks

+