Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a way to word-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!

like image 977
blippy Avatar asked Oct 28 '09 16:10

blippy


People also ask

How do you wrap a word in Span?

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!

How do you break a long word in HTML?

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.


2 Answers

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)

like image 97
Aaron Bennett Avatar answered Oct 17 '22 03:10

Aaron Bennett


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
like image 22
Paul Zahra Avatar answered Oct 17 '22 03:10

Paul Zahra