CSS Tip: Wrap Long Text In Table Cell Or In A Constant Width Div Using CSS

Post Pic

You might have come across weird situations where a long text inserted into a table cell or into a well formatted div disturbs the entire look and feel of the page. Most of the developers might have faced this situation where dynamic data comes in from the server and merges into the specified div container or table cell. Why the long text without spaces cannot wrap when we place the same into a div container? do we have any solution for the same?…

Yes! we do have a solution for the above scenario. This can be handled through CSS3, we do have some properties where we can wrap a long text easily. Below is the simple example where we can experiment the same.

Here is the situation we face in our development

1
<div class="container">abcdefghijklmnopqrstuvwxyz</div>
1
2
3
4
.container{
width:200px;
background-color:#cccccc;
}

Word Wrap

Output of the same is shown below:

Here is the solution were we can apply some CSS properties to wrap a long text.

1
<div class="container wordwrap">abcdefghijklmnopqrstuvwxyz</div>
1
2
3
4
5
6
7
8
/* Word Wrap */
.wrapword{
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* css-3 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}

Word Wrap

Above would be helpful for most of the developers.

Related Entries...

Advertisement

Please let us know your feedback about the article through the comments section below, we want to hear from you about our website. And your comment / advice may help us to serve you better in upcoming articles.

Thank You!
Vivekanand [Founder of DeveloperSnippets]

5 Responses

10.08.11

Interesting post!! I really like this site, and hope you will write more, thanks for your information.

10.08.11

Very useful tip Vivek… Thanks for sharing!

10.08.11

Interesting post!! I really like this site, and hope you will write more, thanks for your information.
+1

10.08.11

Good Tip Vivek – very useful for content oriented sites – good one – keep sharing the good stuff.

10.08.11

Great, This article is useful to me. Thanks

Leave Your Response

* Name, Email, Comment are Required