36

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

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

<div>Solutionforentprise</div>
4

6 回答 6

48

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

演示

div {
   width: 20px;
   word-wrap: break-word;
}
于 2013-09-05T04:57:54.870 回答
15

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

word-break: break-all;

但它不适用于 Opera。

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

于 2013-09-05T05:02:47.560 回答
6

给你的 div 一个 id 或 class

然后

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

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

于 2013-09-05T05:02:21.397 回答
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;

资源

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

于 2019-01-01T08:21:04.237 回答
3

像这样

演示

CSS

div {
    width: 20px;
    word-wrap:break-word;
}
于 2013-09-05T05:12:02.690 回答
2

修复 DIV 的大小并应用“溢出：隐藏”，这样它就不会影响网格大小。

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

你需要查看整个文本吗？

于 2013-09-05T05:02:01.353 回答