HTML/CSS/PHP如何实现文本达容器边界或指定字符数时自动换行

你之前写的PHP逻辑无法生效核心有两个问题：

1. HTML默认会将文本里的普通换行符\n识别为普通空白，不会渲染为实际的换行效果，除非给容器加对应CSS属性
2. 替换空格为换行的逻辑本身不符合需求：既不能识别容器边界位置，遇到无空格的长连续文本（比如长链接、连续数字、长英文单词）完全无法触发换行，还会把所有空格都换成换行导致排版错乱。

不需要后端做任何文本处理，直接给容器添加CSS属性即可，会自动根据容器宽度适配换行，完全不会出现横向滚动条，适配响应式布局：

.info {
  /* 按布局需求设置容器宽度，确保容器宽度受父级约束，不会被内容撑开 */
  width: 100%;
  /* 核心换行属性：长内容到达容器边界时自动折断换行 */
  overflow-wrap: break-word;
  word-break: break-word;
  /* 可选：如果需要保留文本中原有的手动换行、空格缩进，就加下面这行，不需要可以删除 */
  white-space: pre-wrap;
  /* 如果之前给容器设置了横向滚动相关属性，记得删掉，或者改成overflow-x: hidden */
  overflow-x: hidden;
}

属性说明：

• overflow-wrap: break-word：兼容现代浏览器，当无空格的长串内容（长链接、连续数字、长单词）超出容器宽度时，会自动在边界位置折断换行，不会撑宽容器
• 该方案会优先在正常的分词位置（空格、标点）换行，排版效果比硬切字符自然很多。

如果需求是固定每N个字符就换行，和容器宽度无关，可以用后端处理的方式实现，注意HTML中实际换行需要用<br>标签，不能直接输出\n：

<div class="info">
<?php
$strec = $row["text"];
// 自定义每行的字符数
$perLineCharNum = 70;
// 兼容中文等多字节字符的切分逻辑
if (function_exists('mb_strlen') && function_exists('mb_substr')) {
    $lineArr = [];
    $totalLen = mb_strlen($strec);
    for ($i = 0; $i < $totalLen; $i += $perLineCharNum) {
        $lineArr[] = mb_substr($strec, $i, $perLineCharNum);
    }
    $strec = implode("<br>", $lineArr);
} else {
    // 无mbstring扩展时的兼容方案
    $strec = wordwrap($strec, $perLineCharNum, "<br>\n", true);
}
?>
<p><?=$strec?></p>
</div>

如果用这个方案，依然建议搭配方案1的CSS属性做兜底，避免极端情况内容溢出。

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