如何使 div 换行？

Question

我有以下代码：

.thing {
  width: 90%;
  height: 400px;
  border: 10px solid #000;
}

<div class="thing">
  aaaaaaaaaaaa
</div>

问题在于当我添加太多内容时，文本会超出 div 的范围！

如何只使用CSS修复这个问题？

- Luis Parker

---

padding: 10px solid #000; 的翻译是：填充：10像素实线#000；........只是为了确认，您是指边框对吗？ - Riskbreaker

Answer 1

.thing {
width: 90%;
height: 400px;
padding: 10px solid #000;
word-break:break-all;
}

使用 word-break

- Bhushan Kawadkar

---

break-all和break-word有什么区别？ - Luis Parker

break-all会将单词移到下一行，如果它无法适应容器的宽度，但是break-word会将单词分开以使其适应容器的宽度。请参见此链接https://dev59.com/iXI-5IYBdhLWcg3wj5FG - Bhushan Kawadkar

Answer 2

这是因为您没有添加空格。

只需在“aa”之间的某处添加一个空格 就像这样 > “aaaaaa aaaaaa”，就不会出现没有12个字符的单词。

但如果您需要这个长单词，则可以使用。

word-break:break-all;

- fahd4007