要让 <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>
总结:
使用 white-space: pre-wrap; 和 word-wrap: break-word; 是让 <pre> 标签内容自动换行的最佳实践。 这确保了在保留空格和换行符的同时，文本也能适应不同的屏幕尺寸和容器宽度。 避免使用 <wbr> 标签，因为它维护起来比较麻烦。