Bootstrap3环境下，如何让<span>中/分隔文本像空格般自动换行？

当然可以！浏览器默认只会在空格、连字符这类预设断点处换行，/并不在默认换行规则里，所以无空格但用/分隔的长文本就会溢出容器。这里有两种适配Bootstrap3场景的可靠方案：

方案1：精准控制换行点（推荐） #

直接在文本的/后面插入HTML软换行标签<wbr>——它的作用是告诉浏览器“这里可以换行，但空间足够时保持原样”，完全不影响正常显示效果。

比如把你的文本从：

<span>this/is/a/long/text/that/needs/wrapping</span>

改成：

<span>this/<wbr>is/<wbr>a/<wbr>long/<wbr>text/<wbr>that/<wbr>needs/<wbr>wrapping</span>

这种方法最精准，只会在你指定的/位置触发换行，不会随意切割完整单词。

方案2：纯CSS全局处理（无需修改HTML） #

如果不方便修改文本内容，可以给目标span添加自定义CSS，强制浏览器在必要时在/处（及其他字符处）换行。

首先给span加一个自定义类名：

<span class="break-on-slash">this/is/a/long/text/that/needs/wrapping</span>

然后在你的CSS文件（或页面<style>标签）中添加：

.break-on-slash {
  word-break: break-all;
  overflow-wrap: break-word;
}

word-break: break-all会让浏览器在空间不足时切断任意字符（包括/）；overflow-wrap: break-word作为兜底规则，确保超长单词也能正常换行，适配不同移动端屏幕尺寸。

注意：这个方案会允许浏览器在任意字符处换行（比如长单词中间），如果你的文本里有需要保持完整的长单词，优先选择方案1。

内容的提问来源于stack exchange，提问作者M.E.