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

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

 Print 
  Author : Shailendra Chauhan
Posted On : 23 May 2012
Total Views : 17,920   
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
20 JAN
ASP.NET Core with Angular4 (Online)
07:00 AM-09:00 AM IST / 07:30 PM Central Time
20 JAN
ASP.NET MVC with Angular (Classroom)
05:00 PM to 07:00 PM IST (+5:30 GMT)
20 JAN
ASP.NET MVC with Angular4 (Online)
03:00 pm to 05:00 pm
20 JAN
Angular2+4 with Firebase (Classroom)
03:00 PM to 05:00 PM IST (+5:30 GMT)
16 JAN
Developing Microsoft Azure Solutions (Online)
07:00 AM-09:00 AM IST/ 07:30 PM -09:30 PM CST
16 JAN
React with Redux (Online)
07:00 AM-08:30 AM IST
15 JAN
Big Data Hadoop Developer (Online)
05:00 PM to 06:30Pm IST / 06:30AM to 08:00AM CST
8 JAN
ASP.NET Core with Angular4 (Online)
09:00 Pm to 11:00 Pm IST (+5:30Gmt)
8 JAN
Big Data Hadoop Developer (Online)
07:00 AM - 08:30 AM IST(+5:30 GMT)
16 DEC
ASP.NET MVC with Angular4 (Classroom)
10:00 AM - 01::00 PM IST(+5:30 GMT)
12 DEC
ASP.NET MVC with Angular4 (Online)
09:00 PM - 11:00 PM IST(+5:30 GMT)
2 DEC
Developing Microsoft Azure Solutions (Online)
07:00 AM-09:00 AM IST / 08:30 PM Central Time
2 DEC
Angular2+4 with Firebase (Online)
10:30 AM-12:30 PM IST(+5.30 GMT)
27 NOV
ASP.NET Core (Online)
07:00 AM to 09:00 AM IST (+5:30 GMT)
11 NOV
ASP.NET MVC (Online)
08:00 AM-10:00 AM IST / 09:30 PM To 11:30 PM(CST)
SUBSCRIBE TO OUR YOUTUBE CHANNEL
 
 
 
LIKE US ON FACEBOOK
 
+