Bootstrap框架下Div内文本溢出不换行问题求助

嘿，我懂你的困扰——那段连在一起的长文本（全是PRESENTATION拼接起来的）之所以会溢出容器，是因为浏览器默认不会自动拆分没有空格或标点的连续字符串，哪怕你用了Bootstrap的栅格布局也没用。不过解决起来很简单，给你几个实用方案：

方案1：用Bootstrap内置类（推荐，Bootstrap 5+适用） #

Bootstrap 5已经内置了专门处理文本换行的类text-wrap，直接把它加到你的<p>标签上就行：

<div class="col-md-9">
  <p class="text-wrap">PRESENTATIONPRESENTATIONPRESENTATIONPRESENTATIONPRESENTATIONPRESENTATIONPRESENTATION</p>
</div>

方案2：自定义CSS（兼容所有Bootstrap版本） #

如果你的项目用的是Bootstrap 3或者更早的版本，或者不想依赖内置类，可以在SITE.css里添加以下样式，强制长文本换行：

/* 给包含长文本的p标签添加换行规则 */
.col-md-9 p {
  /* 标准写法，优先使用 */
  overflow-wrap: break-word;
  /* 旧浏览器兼容写法，可选补充 */
  word-wrap: break-word;
}

这个规则会让浏览器在必要的时候拆分过长的连续字符串，让它乖乖待在容器范围内。

额外小提示 #

如果你需要更激进的换行（不管是不是完整单词，只要到容器边缘就拆分），可以用word-break: break-all;，不过这个可能会把正常单词拆得七零八落，排版美观度会受影响，所以优先用上面的overflow-wrap方案。

选一个适合你项目的方案试试，应该就能解决文本溢出的问题啦~

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