Today I'm going to talk about a rarely used but extremely useful CSS property, the word-wrap. You can force long (unbroken) text to wrap in a new line by specifying break-word with the word-wrap property. For example, you can use it to prevent text extending out the box and breaking the layout. This commonly happens when you have a long URL in the sidebar or comment list. Word-wrap is supported in IE 5.5+, Firefox 3.5+, and WebKit browsers such as Chrome and Safari.
CSS: Word-Wrap Property (view demo)
You can specify either normal or break-word value with the word-wrap property. Normal means the text will extend the boundaries of the box. Break-word means the text will wrap to next line.
.break-word {
word-wrap: break-word;
}
Thanks for this, I looked for a few hours how to solve the long_urls_in_sidebar issue :)
Try this one
div { word-wrap: break-word }
Here is some content for the div element
Files Sharing
Excellent thank youuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu
Nice..love your site
It seems to work only in IE.
How do I have to apply to WYSIWYG editor(CK Editor)?
Have just I add this line into:
/template/system/editor.css
or
my template’s css?
Just it?
It doesn’t work;(
Great topic! Thank you very much!
I found a lot of usefull tips here :) Thanks for sharing.
nice work.
thank u…………
One important note – if the element has a fixed width this approach works well. However if you have width 100% this doesn’t do the job.
For Fire Fox use:: div {word-wrap:break-word}
For IE use : div { word-break:break-all}
Wow – thanks, just stumbled on this as needed a solution for a problem I was having and works like a charm.
Also thanks for the edition there Ram.
Thanks for this tip. I didn’t know about it before but I will use it in the future.
This technique will not work for long text inside a cell in a table. In my work environment tables are used show the data fetched from the database, and they raise the ticket as design issue. Please help.. any css work around?
İf you have fixed width like 100%
You also must set max-width property of css to make it work.
thank you for extra super article, it will help a lot, i think even tough we fix the width, the problem will not be solved.the only solution is to use the property word-pray with the value break-word.
Very useful article! But it did not work with text inside table cells. There was no problem with Firefox, but Safari, IE8 and IE7 gave different result. IE7 rendered the text block inside cell with given width 200px but the table cell itself was streched into width of the long string without text wrap. so I got cell with wrapped string inside and lot of white space beside it. Adding max-width did not do any difference. But I found one solution that worked for all.
The CSS part is the original described in the article, but I added these styles: width: 200px; float: left;
By making text block float, IE7 rendered table cell correctly widthout any additional white space. And it did not affect other browsers.
Helpful article for me. Thanks for sharing.
Los Angeles Web Design
This is new property included in CSS3 not available in older version and all browsers dosent support it.
My experience so far with word-wrap is that it has worked well with Internet Explorer 6 and 7, didn’t work at all with Firefox and broke the line of text in the middle of words in Explorer 8. Safari had similar result as Explorer 8, but I don’t know if word-wrap should be blamed. (Unfortunately, I just found out about those last problems yesterday when viewing my web page at a client’s house. Oops!)
I used white-space:pre-wrap; with Firefox successfully and white-space:pre; seems to work on almost any browser. Unfortunately all of the word wrapping options seem to give me problems in one browser or another.
The best solution, at the moment, seems to be white-space:pre; to preserve text formatting, using fonts that everyone has (like Arial ) and manually hitting carriage returns where the line of text should end. This isn’t a fancy way to go, but it should give predictable results across just about any browser.
Feel free to check out my website. (Just wait a day two for me to do some editing if you are running IE8 or Safari.)
Forget what I said previously about white-space:pre. It was causing some odd display issues in Internet Explorer. In fact the preformatting, attributes and tags in general seemed to be a little unpredictable.
The only thing that seems predictable so far is that white-space:normal; initiates normal word wrapping in almost any browser. Word-wrap:break-word initiates normal wrapping in IE6 and IE7, has no effect in firefox, and breaks words in the middle in IE8. I didn’t get at first that you found this desirable under some circumstances. Unfortunately, it only seems to work consistently well in IE8.
In my case, I wanted normal wrapping behavior and preservation of formatting for the main text box on my web pages. White-space:normal; seems to get the wrapping started and standard html tags like and work best for adding white space to the text. I used the replace function of notepad to replace any double spaces with followed by a space. This was a remarkably easy way to switch over my pre formatted text. I should have the work done on the pages this morning and begin final testing. At that point, I’ll know for sure how well this cleaner version of the code works.
Note: I’m running in HTML 4.01 strict mode.