html - 如何避免 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

如何避免这个问题。如果里面没有空格，有没有办法把这个词分开？我不确定我应该用谷歌搜索什么，甚至不知道如何措辞，这是主要问题。感谢您的回复。

Answer 1

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

如果文本太长，我会考虑在 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 .