问题
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>
来源:https://stackoverflow.com/questions/18628038/break-long-word-with-css