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
Posted On : 23 May 2012
Total Views : 15,513   
Updated On : 14 Jul 2012
 

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.



Free Interview Books
 
COMMENTS (0)
6 JUN
Hadoop Development cum Administration (Online)

7:00 AM-9:00AM IST

Know More
30 MAY
ASP.NET MVC with Angular4 Development (Online)

09:00 PM-11:00 PM IST(+5.30 GMT)

Know More
30 MAY
ASP.NET MVC with Angular4 Development (Online)

09:00 PM-11:00 PM IST(+5.30 GMT)

28 MAY
ASP.NET Core with Angular4 Development (Classroom)

10:30 AM-11:30 AM Weekend

27 MAY
ASP.NET MVC with Angular4 Development (Classroom)

4:00 PM-5:30 PM Weekend

20 MAY
Angular2 and Angular4 Development (Online)

08:00 AM-10:00 AM IST(+5.30 GMT) Weekend

20 MAY
NodeJS with Angular4 Development (Classroom)

5:00 PM-6:30 PM Weekend

8 MAY
ASP.NET MVC with Angular4 Development (Online)

07:00 AM-09:00 AM IST(+5:30 GMT) M/W/F

2 MAY
ASP.NET Core Development (Online)

07:00 AM - 09:00 AM IST( TUS, THR)

29 APR
ASP.NET MVC with Angular2 Development (Classroom)

9:30 AM-11:00 AM

22 APR
MEAN Stack 2 Development (Classroom)

11:00 AM-12:30 PM Weekend

10 APR
Master Class ASP.NET MVC 5 with Angular2 Plus Angular4 Development (Online)

09:00 PM - 11:00 PM IST (M/W/F)

BROWSE BY CATEGORY
 
 
LIKE US ON FACEBOOK
 
+