在HTML中，<pre> 标签用于显示预格式化的文本，默认情况下，<pre> 标签中的文本会保留所有的空格和换行符，并且不会自动换行，如果你希望实现自动换行的效果，可以使用CSS来控制。
以下是一些常用的方法来实现<pre> 标签内容的自动换行：
方法一：使用white-space 属性
你可以使用 CSS 的white-space 属性来控制文本的换行行为，将white-space 设置为pre-wrap 可以实现自动换行，同时保留空白字符。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pre Tag Auto Wrap</title>
<style>
pre {
white-space: pre-wrap; /* 允许自动换行 */
word-wrap: break-word; /* 防止长单词溢出容器 */
}
</style>
</head>
<body>
<pre>
This is a long line of text that should automatically wrap within the pre tag. It contains spaces and tabs which should be preserved.
</pre>
</body>
</html>方法二：使用overflow-wrap 属性
overflow-wrap 是一个较新的 CSS 属性，它的作用与word-wrap 类似，但更符合现代标准。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pre Tag Auto Wrap</title>
<style>
pre {
overflow-wrap: break-word; /* 防止长单词溢出容器 */
}
</style>
</head>
<body>
<pre>
This is a long line of text that should automatically wrap within the pre tag. It contains spaces and tabs which should be preserved.
</pre>
</body>
</html>方法三：结合white-space 和overflow-wrap
为了确保兼容性和更好的效果，可以同时使用white-space 和overflow-wrap。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pre Tag Auto Wrap</title>
<style>
pre {
white-space: pre-wrap; /* 允许自动换行 */
overflow-wrap: break-word; /* 防止长单词溢出容器 */
}
</style>
</head>
<body>
<pre>
This is a long line of text that should automatically wrap within the pre tag. It contains spaces and tabs which should be preserved.
</pre>
</body>
</html>通过以上方法，你可以让<pre> 标签内的文本根据容器宽度自动换行，同时保留原有的格式和空白字符。