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

Advertisement
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...