92

Possible Duplicate:
CSS: how can I force a long string (without any blank) to be wrapped in XUL and/or HTML

Lets say one has the following code:

<div style="width:100px;height:1000px">This-is-a-long-line-of-text-without-any-spaces-This-is-a-long-line-of-text-without-any-spaces-This-is-a-long-line-of-text-without-any-spaces-This-is-a-long-line-of-text-without-any-spaces</div>

I apologize but stack overflow (according to the preview) does not line break code snippets.

Under most (?) circumstances, the following will cause the container that holds the long line of text to stretch to the full width of the text contained within.

We would like to force this to line break (even mid word) according to the css specified width (width:100px) of the parent container.

Is this possible via a css tag I do not know about?

IE6+ comparability, plus gecko/webkit/opera please.

Community
  • 1
  • 1
anonymous-one
  • 14,454
  • 18
  • 60
  • 84
  • 1
    For those who are searching the **same solution with bootstrap** there is `text-break` when it is a word without whitespaces, or `text-wrap` when it is a text with whitespaces. [Here is the documentation](https://getbootstrap.com/docs/4.4/utilities/text/#word-break) – Devart Nov 18 '20 at 11:48

2 Answers2

148

Modern (CSS3) answer, that now works in all browsers:

.wrap {
  overflow-wrap: break-word;
}

Note that you may need to add overflow:hidden and/or width:100% to a parent/ancestor element.

Old answer:

.wrap { 
   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 */
}
joe
  • 3,752
  • 1
  • 32
  • 41
Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
  • 1
    will check this within 12 hours and correct answer vote this answer if it does what i need. thank you wholeheartedly. – anonymous-one Jul 22 '12 at 11:35
  • 9
    IIRC `word-wrap` is supported by all browser. So no need to do all that browser specific stuff. – PeeHaa Oct 06 '12 at 16:32
  • @PeeHaa Confirmed on Firefox 43. `word-wrap: break-word` works fine. I don't know what `white-space: pre-wrap` does. – Maciej Szpakowski Dec 27 '15 at 16:13
  • What if you don't have defined a width for div element? It didn't worked for me unless I specity a width in pixels for the element. – Leonardo Montenegro Jun 07 '16 at 19:27
  • 2
    `white-space: pre-wrap` does not work in Chrome (54) but `word-wrap: break-word` does. – jox Oct 29 '16 at 15:59
  • Have same issue with Safari 10, does anyone have thoughts on that? – Foriger May 23 '17 at 13:12
  • I can confirm `word-wrap: break-word` is necessary in Chrome v70 – sambecker Nov 13 '18 at 17:10
  • 6
    Today in 2019, you could just specify overflow-wrap: break-word; – Jacobski Apr 23 '19 at 06:58
  • `space: pre-wrap` has a different effect - quoting [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/white-space): _Sequences of white space are preserved. Lines are only broken at newline characters in the source and at
    elements._ `word-wrap: break-word` is the solution, but will require a fixed size, possibly `overflow: hidden` on the container or it's ancestor.     – dadasign May 23 '19 at 16:55
  • To add onto what @Jacobski said, `overflow-wrap` is the new standard – Gavin May 03 '21 at 05:41
  • For tailwindcss users use: `break-all` – leonnicklas Nov 15 '22 at 15:47
14

A combination of word-wrap and word-break may solve this for you. See How to force a line break in a loooooong word in a DIV? (possible dupe)

Community
  • 1
  • 1
Paul Fleming
  • 24,238
  • 8
  • 76
  • 113