为什么pre预格式化文本会超出容器边界？如何修复该问题？

pre标签默认会保留文本中的空格、换行格式，且不会对长文本自动折行，是导致文本溢出容器的核心原因，同时你当前的HTML代码存在标签嵌套顺序错误，也可能触发异常布局。

方案1：自动折行适配容器 #

如果需要文本完全在容器内展示、不出现横向滚动，可给pre标签添加以下CSS样式：

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  margin: 0;
}

属性说明：

• white-space: pre-wrap：保留文本中原有的空格、换行，同时允许超出容器宽度的内容自动折行
• word-wrap: break-word/overflow-wrap: break-word：对连续无空格的长字符串强制折行，避免单个长内容溢出
• margin: 0：可选，移除pre标签默认的外边距，避免额外撑大容器

方案2：溢出滚动保留原格式 #

如果需要保留文本原本的排版格式不折行，可设置溢出部分滚动查看：

pre {
  overflow-x: auto;
  max-width: 100%;
}

修正HTML嵌套错误 #

你提供的HTML代码中div和pre的闭合顺序错误，会导致标签嵌套异常，修正后的写法如下：

<div>
  <pre>
    Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
  </pre>
</div>

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