Question

我有一种情况，可能会有像'hellowordsometext'这样的长词或像'1234567891122'这样的整数，但两者之间没有任何空格。请检查这个js。 http://jsfiddle.net/rzq5e/6/

如何在达到div宽度后将其分解到下一行。现在发生的事情是，它与div一起出现

<div>Solutionforentprise</div>

Answer 1

您需要的是word-wrap: break-word;，此属性会强制非间隔字符串在div

内部中断

Demo

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

Answer 2

我自己找到了这个解决方案。

word-break: break-all;

但它对Opera不起作用。

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

Answer 3

为你的div提供一个id或类

然后

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

IE 5.5 +，Firefox 3.5+和WebKit浏览器（如Chrome和Safari，Opera 10.5 +）支持自动换行。

Answer 4

修正DIV的大小并应用'overflow：hidden' 因此它不会影响网格大小全部。

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

你需要查看整个文本吗？

Answer 5

喜欢这个

<强> DEMO

<强> CSS

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

Answer 6

其他答案在旧版浏览器中也存在一些问题，例如Chrome 32之前的版本。

最好使用以下代码：

  /* 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;

您还可以在单词（如果支持） 处添加连字符：

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

用CSS打破长话

6 个答案: