I know Internet Explorer has a word-wrap style, but I'd like to know if there is a cross-browser method of doing so to text in a div.
Preferably CSS but JavaScript snippets would work ok too.
edit: Yeah, referring to long strings, cheers folks!
You can use the CSS property word-wrap:break-word; , which will break words if they are too long for your span width. Works well for the asp.net label control. Thanks!
The <wbr> element If you know where you want a long string to break, then it is also possible to insert the HTML <wbr> element. This can be useful in cases such as displaying a long URL on a page.
Reading the original comment, rutherford is looking for a cross-browser way to wrap unbroken text (inferred by his use of word-wrap for IE, designed to break unbroken strings).
/* Source: http://snipplr.com/view/10979/css-cross-browser-word-wrap */ .wordwrap { white-space: pre-wrap; /* CSS3 */ white-space: -moz-pre-wrap; /* Firefox */ white-space: -pre-wrap; /* Opera <7 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* IE */ }
I've used this class for a bit now, and works like a charm. (note: I've only tested in FireFox and IE)
Most of the previous answer didn't work for me in Firefox 38.0.5. This did...
<div style='padding: 3px; width: 130px; word-break: break-all; word-wrap: break-word;'> // Content goes here </div>
Documentation:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With