Break long word with CSS

问题:

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>

回答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;
}

回答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

回答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+.

回答4:

Fix the size of the DIV and apply 'overflow: hidden' so it will not effect the grid size an all na.

div{width: 40px;
overflow: hidden;}

do you need to view entire text?

回答5:

Like this

DEMO

CSS

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

回答6:

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>