为什么预格式化的文本会延伸到其容器之外？ [复制]答案

【问题标题】：Why is preformatted text extending outside its container? [duplicate]为什么预格式化的文本会延伸到其容器之外？ [复制]
【发布时间】：2021-12-19 13:28:42
【问题描述】：

我已经厌倦了将一些文本放入我所做的边框中。

div {
  background-color: lightgrey;
  width: 200px;
  border: 15px solid crimson;
  padding: 50px;
  margin: 20px;
}

<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.
     </div>
            </pre>

现在我有很多文本要放在边框内。我正在使用 pre 标签，它看起来像这样：

我试图了解如何将文本放在边框内，但我尝试过的所有方法都不起作用。我能做些什么来解决它？

【问题讨论】：

当你不希望文本被打印成 HTML 文件中写的“预格式化”时，为什么要使用
```
？
```

标签： html

【解决方案1】：

使用white-space: pre-wrap。

div {
  background-color: lightgrey;
  width: 600px;
  border: 15px solid crimson;
  padding: 50px;
  margin: 20px;
}
pre {
  white-space: pre-wrap;
}

【讨论】：

您需要在 pre 而不是 div 上设置它才能工作。