186

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.

I'm referring to long strings.

starball
  • 20,030
  • 7
  • 43
  • 238
citronic
  • 9,868
  • 14
  • 51
  • 74

6 Answers6

325

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)

Aaron Bennett
  • 3,904
  • 1
  • 17
  • 8
50

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:

Nathan
  • 8,093
  • 8
  • 50
  • 76
Paul Zahra
  • 9,522
  • 8
  • 54
  • 76
  • 3
    thanks! this is the only answer that worked (word-break: break-all; is what worked to me) – DaniCE Jul 19 '18 at 09:18
14
white-space: pre-wrap

quirksmode.org/css/whitespace.html

NVI
  • 14,907
  • 16
  • 65
  • 104
14

Aaron Bennet's solution is working perfectly for me, but i had to remove this line from his code --> white-space: -pre-wrap; beacause it was giving an error, so the final working code is the following:

.wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

thank you very much

Hugo
  • 1,662
  • 18
  • 35
  • 1
    Aaron Bennett mentioned this same answer 2 years before you. what you did here does not add value. – AaA Jun 26 '14 at 10:15
  • 7
    Hi, as you can see if you read both answers again, what i am saying is just that Aaron's solution is ok, but i was getting an error in one of the lines he wrote, so i just changed it to the solution that worked for me. Maybe i should have comment in his answer, i know it, sorry & thanks – Hugo Jul 03 '14 at 10:42
  • I had to add this "white-space: -pre-wrap" and it worked :) – Ravi Khambhati Nov 20 '17 at 15:41
0

As david mentions, DIVs do wrap words by default.

If you are referring to really long strings of text without spaces, what I do is process the string server-side and insert empty spans:

thisIsAreallyLongStringThatIWantTo<span></span>BreakToFitInsideAGivenSpace

It's not exact as there are issues with font-sizing and such. The span option works if the container is variable in size. If it's a fixed width container, you could just go ahead and insert line breaks.

DA.
  • 39,848
  • 49
  • 150
  • 213
  • @TomHert that's really odd. Though, well, IE. It never works. That said, this was posted 5 years ago. CSS3 now has some better word-wrap options that IE may accomodate https://developer.mozilla.org/en-US/docs/Web/CSS/word-wrap – DA. Feb 11 '14 at 05:42
  • Yeah I know, I was just shocked by the simplicity of this solution that I had to tried it:) – Tom Hert Feb 11 '14 at 23:09
0

You can try specifying a width for the div, whether it be in pixels, percentages or ems, and at that point the div will remain that width and the text will wrap automatically then within the div.

Slevin
  • 312
  • 2
  • 12