Is there a way to word-wrap long words in a div?

css html word-wrap
rutherford picture rutherford · Oct 28, 2009 · Viewed 282.2k times · Source

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!

Answer

Aaron Bennett picture Aaron Bennett · Oct 28, 2009

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)

Related questions

How to word wrap text in HTML?

How can text like aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa which exceeds the width of a div (say 200px) be wrapped? I am open to any kind of solution such as CSS, jQuery, etc.

Read More
Wrap text in <td> tag

I want to wrap some text that is added to a <td> element. I have tried with style="word-wrap: break-word;" width="15%". But it is not wrapping the text. Is it mandatory to give it 100% width? I have other …

Read More
How to prevent line breaks in list items using CSS

I'm trying to put a link called Submit resume in a menu using a li tag. Because of the whitespace between the two words it wraps to two lines. How to prevent this wrapping with CSS?

Read More