Word wrapping in css / js

Question

I'm looking for a cross-browser way to wrap long chunks of text that don't have breaks (like long URLs) inside divs with predefined widths.

Here are some solutions that I found on the Internet and why they do not work for me:

• overflow: hidden / auto / scroll . I need all the text that will be visible without scrolling. Div can grow vertically, but not horizontally.
• Injection and shyness; to a line via js / server-side - & shy; FF3 is now supported, but copying and pasting the URL with & shy; in the middle will not work in Safari. In addition, as far as I know, there is no pure method for measuring text width to find the best line offsets to add these characters (there is one hacker path, see the next paragraph). Another problem is that scaling in Firefox and Opera can easily break this.
• dropping text into a hidden element and measuring offsetWidth - associated with the element above, it requires the addition of additional characters to the string. In addition, measuring the number of interrupts required in a long text may require thousands of expensive DOM inserts (one for each substring length), which can effectively freeze a site.
• using a monospace font - again, scaling can ruin the width calculations, and the text cannot be styled freely.

Things that look promising, but not quite there:

• word-wrap: break-word is now part of the CSS3 working draft , but it is not supported by either Firefox, Opera, or Safari. This would be an ideal solution if it worked in all browsers today :(
• injecting <wbr> tags into a string via js / server-side - copying and pasting URLs works in all browsers, but I still don't have a good way to measure where to put breaks. Also, this tag is invalid HTML.
• adding breaks after each character is better than thousands of DOM attachments, but still not perfect (adding DOM elements to a document burns memory and slows down selector queries, by the way).

Does anyone have any more ideas on how to solve this problem?

Answer 1

Css yo!

.wordwrap { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } 

Also I just found this article http://www.impressivewebs.com/word-wrap-css3/

Therefore you should use

 .wordwrap { word-wrap: break-word; } .no_wordwrap { word-wrap: normal; } 

Answer 2

I usually handled this using a combination of word-wrap and <wbr> . Please note that there are several options. as you can see, ​ probably the best choice for compatibility.

word-wrap Browser support is not scary, everything is covered, Safari, Internet Explorer and Firefox 3.1 (Alpha Build) support it ( src ), so we can be not so far.

As for the server-side failure, I quite successfully used this method (php):

 function _wordwrap($text) { $split = explode(" ", $text); foreach($split as $key=>$value) { if (strlen($value) > 10) { $split[$key] = chunk_split($value, 5, "​"); } } return implode(" ", $split); } 

Basically, for words over 10 characters, I separate them by 5 characters. This seems to work for all the use cases that I have been given.

Answer 3

Here was a little textarea problem with 100% width ignoring parent element width in IE7

I don’t know if any final solution has ever been found, but it seems that the closest one was word-break: break-all , which could do the job in Internet Exploder.

I also found this http://petesbloggerama.blogspot.com/2007/02/firefox-ie-word-wrap-word-break-tables.html similar to my bookmarks, which indicates working around most other browsers, which might help .

CSS3 will be great if it ever appears here ...

Hope this helps, it will be interesting to know what you come up with. Sorry, I can not offer anything tested or more specific.

Answer 4

Using regular expressions in PHP should be faster to break long words. I created a function that processes htmlspecialchars and breaks words with & shy; Here is a feature for anyone interested. Just pass the string and the maximum word length (leave it as 0 if you do not want to split the words with & shy;) and it will return a string with html special characters, and the words are broken with & shy;

 function htmlspecialchars2($string = "", $maxWordLength = 0) { if($maxWordLength > 0) { $pattern = '/(\S{'.$maxWordLength.',}?)/'; $replacement = '$1&shy;'; $string = preg_replace($pattern, $replacement, $string); } //now encode special chars but dont encode &shy; $string = preg_replace(array('/\&(?!shy\;)/','/\"/',"/\'/",'/\</','/\>/'), array('&amp;','&quot;','&#039;','&lt;','&gt;'), $string); return $string; } 

Answer 5

You can use the table layout + word-wrap CSS attribute, which now works in IE7-8 and FF3.5. This will not solve the problem, but at least your design will not be broken.

Answer 6

use white space: normal in css if you need to automatically wrap the text according to the height and width of the component to show that this can be useful for u.

Answer 7

Very similar to Owen's answer, this provides the same thing as the server side on one line:

 return preg_replace_callback( '/\w{10,}/', create_function( '$matches', 'return chunk_split( $matches[0], 5, "​" );' ), $value ); 

Answer 8

This may solve your problem.

 function htmlspecialchars2($string = "", $maxWordLength = 0){ return wordwrap($string , $maxWordLength,"\n", true); }