无空格长文本溢出容器，带空格文本可适配的原因咨询

这是浏览器默认的文本换行规则导致的：

• 浏览器默认只会在**空白字符（空格、换行符这类）**的位置自动换行，把内容拆分成适配容器宽度的行。
• 无空格的长串字符（比如helloooooooooooooooooooooooooooooooo）没有任何空白断点，浏览器会把它当成一个完整的“单词”处理，不会主动拆分这个串，一旦它的长度超过容器宽度，就会直接溢出容器。
• 带空格的文本（比如hello ooooooo ooooo ooooooo ooooooooo oooooooo）里的空格就是天然的换行标记，浏览器会在这些空格处自动换行，让每一行内容都刚好适配容器宽度，自然不会溢出。

解决无空格文本溢出的方法 #

如果想让无空格的长串也能自动换行适配容器，可以用CSS的word-break或overflow-wrap属性：

<p>no spaces (fixed):</p>
<div style="height:50px;width: 200px;border: 4px solid red; word-break: break-all;">helloooooooooooooooooooooooooooooooo</div>

• word-break: break-all：允许在任意字符处换行，不管是不是单词边界。
• 也可以用overflow-wrap: break-word：优先在单词边界换行，如果还是放不下，再在单词内部拆分换行。

你的代码示例 #

<p>no spaces:</p>
<div style="height:50px;width: 200px;border: 4px solid red;">helloooooooooooooooooooooooooooooooo</div>
<br>
<p>with spaces:</p>
<div style="height:50px;width: 200px;border: 4px solid red; ">hello ooooooo ooooo ooooooo ooooooooo oooooooo</div>

内容的提问来源于stack exchange，提问作者Rob