用CSS打破长话

Question

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

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

<div>Solutionforentprise</div>

Answer 1

你需要的是word-wrap: break-word;,这个属性将强制非间隔的字符串在内部打破div

演示

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

其他答案对于旧浏览器有一些问题，比如 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;

来源

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

Answer 4

给你的 div 一个 id 或 class

然后

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

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