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

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

22 Dec 2023
Intermediate
30.8K Views
1 min read
Learn via Video Course & by Doing Hands-on Labs

HTML & CSS Course

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.

Share Article
About Author
Shailendra Chauhan (Microsoft MVP, Founder & CEO at Scholarhat by DotNetTricks)

Shailendra Chauhan is the Founder and CEO at ScholarHat by DotNetTricks which is a brand when it comes to e-Learning. He provides training and consultation over an array of technologies like Cloud, .NET, Angular, React, Node, Microservices, Containers and Mobile Apps development. He has been awarded Microsoft MVP 8th time in a row (2016-2023). He has changed many lives with his writings and unique training programs. He has a number of most sought-after books to his name which has helped job aspirants in cracking tough interviews with ease.
Accept cookies & close this