React开发Hangman网站时文本溢出<div>容器的解决方法求助

问题出在<pre>标签的默认行为和不合理的DOM结构上，以下是具体修复方案：

1. 修正DOM结构 #

把<pre>从<h2>标签中移出——标题标签不应该嵌套块级元素，这会导致样式继承和语义上的问题：

<div className="List" style={{ border: '3px solid white' }}>
  <h2 style={{ color: "white" }}>User created words:</h2>
  <pre className="word-list-pre">{wordList}</pre>
</div>

同时修正了内联样式的border属性：原代码没有给边框宽度加单位（3），浏览器无法识别，改成'3px solid white'才符合CSS规范。

2. 调整CSS样式 #

<pre>默认会强制保留文本格式且不自动换行，需要给它添加换行相关的样式，同时把宽度限制放到外层容器上：

.List {
  width: 40%; /* 让整个列表容器有固定宽度 */
}

.word-list-pre {
  white-space: pre-wrap; /* 保留原有换行的同时，让超出容器的文本自动换行 */
  word-wrap: break-word; /* 处理超长单词的换行 */
  color: white; /* 和标题文本颜色保持一致 */
  margin: 0; /* 移除pre默认的外边距，避免多余间距 */
}

关键说明 #

• white-space: pre-wrap是解决<pre>文本溢出的核心：它既保留了<pre>标签原本的换行和空格格式，又允许文本在容器边缘自动换行。
• 把宽度设置在外层<div>上，确保内部的<h2>和<pre>都能继承这个宽度限制，避免只有标题被限制宽度的问题。

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