使用CSS将长单词分行显示

Question

我有一个情况，可能出现像“hellowordsometext”这样没有任何空格的长单词或整数， 请检查这个js代码。 http://jsfiddle.net/rzq5e/6/

如何在超过div宽度后将其换行。目前的情况是，它会和div一起延伸出去。

<div>Solutionforentprise</div>

- dev1234

Answer 1

你需要的是 word-wrap: break-word;，这个属性将强制非空格字符串在

内部断行。

演示

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

- Mr. Alien

---

这个在所有主要浏览器中都能工作吗？你能告诉我需要哪些浏览器吗？ - dev1234

Answer 2

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

word-break: break-all;

但是对于 Opera 浏览器无效。 http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-break

- dev1234

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;

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>

- Moradnejad

Answer 4

给你的div添加一个id或者class

然后，

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

自动换行功能在IE 5.5+、Firefox 3.5+以及Chrome和Safari等WebKit浏览器，Opera 10.5+中得到支持。

- Vinay Pratap Singh Bhadauria

---

这个在所有主要浏览器中都能工作吗？你能告诉我需要哪些浏览器吗？ - dev1234

@mazraara 在IE 5.5+，Firefox 3.5+和WebKit浏览器（如Chrome和Safari）中支持自动换行功能。 - Vinay Pratap Singh Bhadauria

非常感谢。那么Opera呢？这个功能是CSS3自带的吗？ - dev1234

请查看以下链接：https://caniuse.com/?search=word-wrap%3A%20break-word - Yana Trifonova

Answer 5

Like this

DEMO

CSS

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

- Falguni Panchal

Answer 6

修复 DIV 的尺寸并应用 'overflow: hidden'，这样它就不会影响到网格的大小。

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

你需要查看完整的文本吗？

- Shareek Ahamed