div中的文本溢出

Question

当文本没有空格且超过div大小200px时，它会溢出。 宽度定义为200px。 我已经把我的代码放在这里http://jsfiddle.net/madhu131313/UJ6zG/。 您可以看到下面的图片。 编辑：我希望文本移到下一行。

- madhu131313

Answer 1

这是因为您有一个没有空格的长单词。 您可以使用word-wrap属性使文本自动换行：

#w74 { word-wrap: break-word; }

它的浏览器支持相当不错。 在此处查看有关它的文档。

- chipcullen

---

这个对我没起作用。这里有另一个例子。 - Deepak Vaishnav

这太棒了，解决了一些响应式页面的问题。 - yussan

断词：强制换行 - Pedro Silva

这个不适用于电子邮件模板。相反，您应该使用 word-break:break-all。 - Berni

太棒了！把分数提高，继续前进！ - AndradeL

Answer 2

使用

white-space: pre-line;

它将防止文本溢出div。当文本到达div的末尾时，它会将其断开。

- Nixon

Answer 3

你应该使用 overflow:hidden; 或者 scroll

http://jsfiddle.net/UJ6zG/1/

或者使用 PHP 可以缩短长单词...

- user1317647

---

很棒。抱歉提一下，我希望它能像Gmail聊天或Facebook聊天一样换行 :) - madhu131313

然后你可以使用@chipcullen的版本，带有自动换行！演示：http://jsfiddle.net/UJ6zG/3/ - user1317647

Answer 4

您需要将以下CSS属性应用于容器块（div）：

overflow-wrap: break-word;

根据规范（来源：CSS | MDN）：

overflow-wrap CSS 属性指定浏览器是否应在单词内插入换行符，以防止文本溢出其内容框。

当将该值设置为break-word时，

为了防止溢出，如果在一行中没有其他可接受的断点，则通常不可分割的单词可能会在任意点处被分割。

值得一提的是...

该属性最初是一个非标准的、未经前缀的 Microsoft 扩展，名为word-wrap，并由大多数浏览器使用相同的名称实现。后来将其更名为overflow-wrap，而word-wrap则成为其别名。

---

如果您关心旧浏览器的支持，最好同时指定两者。

word-wrap    : break-word;
overflow-wrap: break-word;

例如，IE9 不识别 overflow-wrap，但对 word-wrap 的支持正常。

- Paolo

Answer 5

这对我很有效：

{word-break: break-all; }

- Addo

---

非常感谢，这是唯一能在我的React项目中使用styled-components的方法。 - mlz7

是的，这对我有效，因为单词将继续到下一行。 - Om Fuke

兄弟，我看了很多建议，这个对我有用，非常感谢你，你是我的救星！ - Pranav Sharma

这是唯一一个对没有空格的文本有效的方法！！！非常感谢！ - Damian

这是唯一一个能处理没有空格的文本的方法！！！非常感谢！ - undefined

Answer 6

这个技巧对我很有效：

{
  word-break: break-all;
  white-space: pre-wrap;
}

white-space
word-break

- Muhammed Moussa

Answer 7

如果有帮助的话，请在选择器中添加以下属性及其值：

white-space: pre-wrap;

- Martin Lloyd Jose

Answer 8

使用overflow:auto，它将为div内的文本提供一个滚动条 :)

- Rahul Razdan

Answer 9

我最近遇到了这个问题。我使用了：display:block;

- arn-arn

---

唯一对我有用的是尝试显示一个没有任何空格的非常大的文本！ - abanet

Answer 10

为了解决这个问题，你也可以使用这个方法来处理 Tailwind。

<p class="break-words ...">...</p>

你可以在这里阅读更多：https://tailwindcss.com/docs/word-break

- minchaej