如何避免 1 个长词弄乱我的评论部分？

Question

所以我有一个我创建的社交评论。基本上发生的情况是，如果有人键入一个非常长的词，我的意思是没有任何空格，新创建的 div 将无法包含它，因此它会跑出页面。

这是一个活生生的例子：

.content {
  background-color: white;
  margin: 0 auto;
  width: 500px;
  border: 1px solid purple;
  padding: 10px;
}

<div class="content" style="color:#B404AE; font-weight:bold;">'.$name. '</div>
<div class="content">'VerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongword'</div>
<br
/>

JSbin 版本：http://output.jsbin.com/tilomacopo

如何避免这个问题。如果里面没有空格，有没有办法把这个词分开？我不确定我应该 google 或什至如何措辞，这是主要问题。感谢您的回复。

Answer 1

如果注释太长，您可以编写一个函数，在某些字符后添加 space 或破折号。这里讨论了一些其他的可能性：How to prevent long words from breaking my div?

Answer 2

如果您将样式 word-break: break-all 添加到包含该文本字符串的容器 - 当它超过该容器的宽度时，它将强制字符串换行。

更新：word-wrap: break-word 是一个更好用的规则。

Updated jsbin

Answer 3

更改默认自动换行的问题是，如果用户正常输入，他们的换行可能会在单词中间中断，感觉很不自然。

如果文本太长，我会考虑在 div 上放置一个滚动条。这样做的方法是给它 overflow: auto CSS 属性.

现场演示：

.content {
  background-color: white;
  margin: 0 auto;
  width: 500px;
  border: 1px solid purple;
  padding: 10px;
  overflow: auto;
}

<div class="content" style="color:#B404AE; font-weight:bold;">'.$name. '</div>
<div class="content">'VerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongword'</div>
<br/>
<div class="content" style="color:#B404AE; font-weight:bold;">'.$name. '</div>
<div class="content">'Shorter, normal words break and wrap normally when they reach the end of the div that they're in.'</div>
<br/>

编辑：我刚刚了解到，如果您使用 word-wrap: break-word，那么只有太长的单词才会被打断，所以这可能是一个更好的解决方案。提供了自动换行属性的完整列表 on MDN。

如何避免 1 个长词弄乱我的评论部分？

How do I avoid 1 long word from messing up my comment section?

html

word