Break long word with CSS

Question

I have a situation where there can be long words like 'hellowordsometext' or integer like '1234567891122' without any space in between. check this js please. http://jsfiddle.net/rzq5e/6/

how is it possible to break it in to next line after it reach the div width. what happens now is, it spans out out along with th div

<div>Solutionforentprise</div>

Solution 1

What you need is word-wrap: break-word;, this property will force the non spaced string to break inside the div

Demo

div {
   width: 20px;
   word-wrap: break-word;
}

Solution 2

I have found this solution my self.

word-break: break-all;

but it doesn't work for Opera.

http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-break

Solution 3

give an id or class to your div

then

#divid
{
width: 30px;
word-wrap: break-word;
}

Word-wrap is supported in IE 5.5+, Firefox 3.5+, and WebKit browsers such as Chrome and Safari, Opera 10.5+.

Solution 4

The other answers have some problems with old browsers, like before Chrome 32.

Its better to use this code:

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-word;
  word-break: break-word;

You can also add a hyphen where the word breaks (if supported):

  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

Source

.c1 {
   width: 200px;
   border: 1px solid;

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-word;
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}

<div class="c1">
For more information, please visit: http://csstricks.com/thisisanonexistentandreallylongurltoaddtoanytextinfactwhyareyoustillreadingit.
</div>

Solution 5

Like this

DEMO

CSS

div {
    width: 20px;
    word-wrap:break-word;
}

View more solutions

Comments

[dev1234]

Will this work in all major browsers ? can you pls tell what are the browsers it want

[dev1234]

Will this work in all major browsers ? can you pls tell what are the browsers it want

[Vinay Pratap Singh Bhadauria]

@mazraara Word-wrap is supported in IE 5.5+, Firefox 3.5+, and WebKit browsers such as Chrome and Safari.

[dev1234]

thanks a lot. what about Opera ? also is this feature comes with css3 ?

[Yana Trifonova]

check this out caniuse.com/?search=word-wrap%3A%20break-word