从数据库读取文本溢出Bootstrap容器问题求助

问题分析 #

从你的截图和代码来看，核心问题很明确：从数据库读取的文本会突破容器宽度溢出，但直接写在HTML里的Lorem Ipsum文本却能正常换行。这几乎可以肯定是因为数据库里的preview字段包含了连续无空格的长字符串（比如超长单词、未加空格的URL，或者用户输入时没换行的连续字符）。

Bootstrap的默认文本样式只会对有空格分隔的内容自动换行，遇到无空格的长串时，不会主动截断，就会出现你看到的溢出情况。而Lorem Ipsum是标准的带空格的文本，所以能完美适配容器。

解决方案 #

针对你使用的Bootstrap 4.1版本，给你三个可行的解决办法，按推荐程度排序：

1. 自定义CSS强制文本换行（最推荐）

因为Bootstrap 4.1还没有引入text-break这个便捷类（这个类是4.3版本才加的），所以我们自己写一个CSS规则来处理：

首先，在你的样式文件（或者<style>标签）里添加：

.text-wrap {
  word-break: break-word;
  overflow-wrap: break-word;
}

这两个属性会强制长文本在任意位置换行，哪怕是单词中间，确保不会溢出容器。

然后修改显示文本的<p>标签，加上这个类：

<p class="text-wrap"><?php echo $array['preview']; ?></p>

2. 升级Bootstrap版本（可选）

如果你的项目允许升级版本，直接升到Bootstrap 4.3及以上，就可以直接用官方提供的text-break类，不用自己写CSS：

<p class="text-break"><?php echo $array['preview']; ?></p>

3. PHP层面预处理文本（兜底方案）

如果数据库里的文本确实是无空格的长串导致的，也可以在PHP输出前给长字符串插入空格，比如用正则匹配长单词并拆分：

<?php
// 把超过20个字符的连续字母插入空格
$processedPreview = preg_replace('/([a-zA-Z]{20,})/', '$1 ', $array['preview']);
echo $processedPreview;
?>

不过这个方法只针对字母类的长串，通用性不如CSS方案，优先推荐前两种。

额外验证步骤 #

你可以先直接查看数据库里的news表中preview字段的内容，确认是不是真的存在无空格的长字符串，这样能更精准地定位问题。

试试上面的方案，应该能完美解决文本溢出的问题！

内容的提问来源于stack exchange，提问作者César Escudero