用 CSS 打断长词答案

【问题标题】：Break long word with CSS用 CSS 打断长词
【发布时间】：2013-09-08 19:10:02
【问题描述】：

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

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

<div>Solutionforentprise</div>

【问题讨论】：

标签： html css long-integer break words

【解决方案1】：

你需要的是word-wrap: break-word;，这个属性会强制在div内打破无间隔的字符串

Demo

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

【讨论】：

这适用于所有主流浏览器吗？你能告诉它想要什么浏览器吗

【解决方案2】：

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

word-break: break-all;

但它不适用于 Opera。

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

【讨论】：

【解决方案3】：

给你的 div 一个 id 或 class

然后

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

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

【讨论】：

这适用于所有主流浏览器吗？你能告诉它想要什么浏览器吗
@mazraara Word-wrap 在 IE 5.5+、Firefox 3.5+ 和 WebKit 浏览器（如 Chrome 和 Safari）中受支持。
非常感谢。歌剧呢？这个功能也是css3自带的吗？
看看这个caniuse.com/?search=word-wrap%3A%20break-word

【解决方案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;

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>

【讨论】：

【解决方案5】：

这样

DEMO

CSS

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

【讨论】：

【解决方案6】：

修复 DIV 的大小并应用 'overflow: hidden' 所以它不会影响网格大小。

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

您需要查看整个文本吗？

【讨论】：