如何让pre标签中的元素自动换行？

要让 <pre> 标签中的元素自动换行，你可以使用以下几种方法：

CSS 的 white-space: pre-wrap;: 这是最推荐和最常用的方法。它保留了空格和换行符，同时允许浏览器在必要时进行自动换行。

pre {
  white-space: pre-wrap;
}

CSS 的 white-space: -moz-pre-wrap; 和 white-space: -o-pre-wrap;: 为了兼容较老版本的 Firefox 和 Opera 浏览器，你可能还需要添加这两个属性。现在通常不需要了，但为了最大兼容性，可以考虑保留。

pre {
  white-space: pre-wrap; /* CSS3 */
  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: -o-pre-wrap; /* Opera 7 */
  word-wrap: break-word; /* Internet Explorer 5.5+ */
}

CSS 的 word-wrap: break-word;: 这个属性可以强制长单词在边界处换行，防止它们溢出容器。尤其在 <pre> 标签中包含长字符串或URL时非常有用。与 white-space: pre-wrap 一起使用效果最佳。

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}

HTML 的 <wbr> 标签 (不推荐): <wbr> 标签可以在文本中插入一个可能的换行点。浏览器会在必要时在此处换行，但如果不需要，则不会换行。这种方法比较繁琐，需要手动插入 <wbr> 标签，不如 CSS 方法灵活。

示例：

<!DOCTYPE html>
<html>
<head>
<style>
pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style>
</head>
<body>

<pre>
This is a long line of text that should wrap automatically within the pre tag.  It also includes a verylongwordwithoutanyspacestodemonstratewordwrapping.
</pre>

</body>
</html>