用 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

给你的 div 一个 id 或 class

然后

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

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

Answer 4

其他答案在旧浏览器上存在一些问题，比如在 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>

Answer 5

像这样

演示

CSS

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

Answer 6

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

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

你需要查看整个文本吗？