用 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>

Answer 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;
}

Answer 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

Answer 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+.

Answer 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>

Answer 5

Like this

DEMO

CSS

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

Answer 6

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?