CSS word-break/word-wrap在HTML <pre>标签中失效，如何实现文本换行？

使用HTML <pre> 标签保留文本原始排版时，内容超出容器范围，尝试用以下CSS实现换行却无效：

pre {
  border: 3px solid blue;
  word-wrap: break-word;
}

对应的HTML代码：

<pre>

• DEPOSIT

• WITHDRAW

• TRANSFER

• AIRTIME TOP UP

• DATA RECHARGE

• ACCOUNT OPENING:

OPAY, PALMPAY, KUDA, MONIEPOINT,VPAY, etc.

• STARTIMES SUBSCRIPTION

• GOTV SUBSCRIPTION

• DSTV SUBSCRIPTION

• ELECTRICITY BILLS (EEDC)

• BET FUNDING:

Bet9ja, BETKING, BETWAY, SPORTY BET, 1X BET, etc.

            </pre>

<pre> 标签的默认CSS属性 white-space: pre 是核心问题：这个属性会强制保留文本的所有原始空格、换行，不允许自动换行。而 word-wrap: break-word 只有在文本允许自动换行的前提下才会生效，所以单独设置它对<pre>标签没用。

标签文本换行的方法 #

以下几种方案可以解决问题，按需选择：

方案1：使用white-space: pre-wrap（推荐） #

这个属性既保留<pre>标签的原始排版（换行、空格），又允许内容超出容器时自动换行，完美兼顾排版保留和换行需求：

pre {
  border: 3px solid blue;
  white-space: pre-wrap;
  word-wrap: break-word; /* 可选：针对超长单词强制拆分换行 */
}

方案2：使用white-space: pre-line #

如果不需要保留文本中的连续空格（会自动合并多个空格为一个），但要保留原始换行，可以用这个属性：

pre {
  border: 3px solid blue;
  white-space: pre-line;
}

方案3：添加横向滚动条兜底 #

如果希望在内容过长时既保留原始排版，又避免布局错乱，可以搭配overflow-x: auto，当内容超出容器时显示横向滚动条：

pre {
  border: 3px solid blue;
  white-space: pre; /* 保留原始排版 */
  overflow-x: auto; /* 超出时显示横向滚动条 */
}

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