Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Preventing long words from flowing out of Div without using CSS break-word

Preventing long words from flowing out of Div without using CSS break-word

Problem

I have a div and all the long words (without spaces) flow outside the div.

Please don't mark the question as a duplicate of How to prevent long text from Flowing out of a container or Long words are flowing out of the box - How to prevent?, where the problem is solved by using word-wrap: break-word;.

The disadvantage of word-wrap: break-word; is that it also breaks short words which are at the edge of the div, in a way that disrupts the flow of the text. I want short words to remain the way they are and only break the long words. Is it possible to implement this? How do other websites handle it?

Problem courtesy of: Jigar Jain

Solution

it also breaks short words which are at the edge of the div

That's not true...word-wrap: break-word; shouldn't do that.
Perhaps you're confusing this with the word-break: break-all; property (which doesn't work in all browsers).

See this jsfiddle for a comparison: http://jsfiddle.net/Snu8B/3/

For firefox you could try the hyphens property.

Solution courtesy of: mihai

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Preventing long words from flowing out of Div without using CSS break-word

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×