Break long word with CSS

落爺英雄遲暮 提交于 2019-11-26 01:50:12

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!