如何避免<pre>标签包裹的长文本溢出？是否需添加<br>标签？

标签内文本自动换行的问题 #

完全不用手动加<br>标签，靠CSS就能轻松实现自动换行，给你两种实用方案：

• 保留

  预格式化特性的换行方案（推荐）
  
  给
  元素添加以下CSS样式：
  pre {
    white-space: pre-wrap;
    word-break: break-word;
  }
  其中pre-wrap会保留原文本里的换行和空格，同时当内容超出容器宽度时自动换行；break-word能处理超长无空格的内容（比如长URL、连续字符），强制拆分换行，避免出现横向滚动条。

• 放弃预格式化的简单换行方案
  如果你不需要保留原文本的空格和换行格式，直接用：

  pre {
    white-space: normal;
  }
  

  这种方式会让

  里的文本像普通段落一样自动换行，但会丢失预格式化的排版，适合对格式要求不高的场景。
  

内容的提问来源于stack exchange，提问作者DCR