Word-Wrap : An Extremely Useful CSS Property

I'm pretty addicted to web design and photo-shop these days. So, you might encounter a lot of articles related to web design & CSS in the upcoming weeks. Well, just because I post a lot about these stuffs, it does not mean that they are not useful being a blogger. All those tutorials and tricks that I post here will have some relation to your blog. And one such extremely useful but rarely used CSS property is "Word-Wrap"

What does Word-Wrap actually do? To keep it simple, it actually wraps the word or in other words, breaks the word to a new line without exceeding the specified boundaries. For example, when you look at coding part in some of my tutorials, they would extend beyond the specified boundary(grey box). Have a look at the following picture and you'll understand what I mean!

I hope you understood the importance of this extremely useful CSS property - "Word-Wrap". To illustrate this, I recommend you to read this article - How to add HTML codes in Blogger Posts? So, you got to know "How to include HTML codes in your post?". Generally, this problem of text extending beyond the specified boundary occurs with IE. To make your posts with HTML codes compatible with all browsers(IE 5.5+, Firefox, Safari, Chrome), just follow these steps assuming that you installed the coding as mentioned in the reference article above.

1. Navigate to "Design >> Edit HTML" from your blogger dashboard and search for the following piece of CSS code in your template.

.codeview {

2. Just add following piece of code below the line mentioned in step 1.

word-wrap: break-word;

3. That's it!!! Save your template.

For users who blog on WP or any other platform, just specify the following tag in the CSS part of your template. It's not necessary that you use it only for displaying the coding stuff - use it anywhere you want the word to wrap by itself within the specified boundaries.

word-wrap: break-word;

To extend them beyond the boundaries (definitely not the idea behind this post), either remove the tag specified above or change the parameter from break-word; to normal;

I hope this simple tip enhances the design of your blog - to keep it neat and clean. This CSS property comes in handy especially for webmasters and web designers. So, share your views about this post. Your comments are always welcome!

Enjoyed the article?

Click here to subscribe to FREE email updates from "Everything About Blogging", so that you do not miss out anything that can be valuable to you and your blog!

What's Next?

Other Recommended Posts

Anonymous

by keeping floating share icons you have harsh to your visitors remove it...

Mukund said on June 30, 2011 at 5:16 PM :

@Anonymous: Well, I heard the same comments from various people. So, I decided to remove it and it's removed now! Hope you leave your name and URL, the next time you comment!

Amit M B said on July 1, 2011 at 8:19 PM :

Hey, nice post, refreshed my css knowledge. i tend to use overflow:hidden or overflow:scroll but i will remmeber this one one from now.

Mukund said on July 1, 2011 at 9:39 PM :

@Amit M B: Yup! Many tend to use overflow:hidden like you! Any way, thanks for the comment! Hope you enjoy the upcoming articles as well!

Use the tab below to comment. No spam please!!!

POST YOUR COMMENT