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属性。

现场演示：

＆＃13;

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

＆＃13;

<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/>

＆＃13;

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

Answer 2

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

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

Updated jsbin

Answer 3

如果注释太长，您可以编写一个在某些字符后添加空格或短划线的函数。这里讨论的还有其他一些可能性：How to prevent long words from breaking my div?

如何避免弄乱我的评论部分？

3 个答案: