wrap long words in a div?

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!


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:

  • word-break
  • word-wrap

  • white-space: pre-wrap
    

    quirksmode.org/css/whitespace.html

    链接地址: http://www.djcxy.com/p/28070.html

    上一篇: 用不同的不透明度重叠CSS元素

    下一篇: 在一个div中包装长单词?