【HTML】实现 pre 标签内容超出自动换行
在HTML中，<pre> 标签用于表示预格式化的文本，它会保留文本的空格和换行。如果需要让 <pre> 标签中的内容超出时自动换行，可以通过CSS来实现。
以下是实现 <pre> 标签内容自动换行的CSS代码示例：
pre {
white-space: pre-wrap; /* 保留空格和换行，并在超出容器宽度时自动换行 */
word-wrap: break-word; /* 在单词过长超出容器宽度时进行断词 */
}将上述CSS添加到您的样式表中，或者在 <style> 标签内添加到您的HTML文档中。然后，在 <pre> 标签中的文本就会在超出容器宽度时自动换行。
示例代码：
<!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>
这是一个很长的文本，它将展示如何在超出容器宽度时自动换行。
这是一个很长的单词，它将在超出容器宽度时自动断词换行。
</pre>
</body>
</html>在上述代码中，<pre> 标签内的文本在超出容器宽度时会自动换行，并且长单词也会在必要时断词换行保证内容的可读性。
评论已关闭