Ruby html.erb中嵌套span文本随Div宽度自动换行的CSS方案

要实现嵌套span内的文本根据div宽度动态换行，只需以下CSS设置即可：

• 给父容器div设置明确的宽度限制（固定宽度或最大宽度）
• 确保span元素保持默认的inline显示模式，同时显式设置white-space: normal避免全局样式干扰

示例代码 #

HTML（erb结构）

<div class="text-wrap">
  <span>
    <span>"This is span 1. "</span>
    <span>"This is span 2. "</span>
    <span>"This is span 3."</span>
  </span>
</div>

CSS

.text-wrap {
  width: 220px; /* 按需设置固定宽度，或用max-width: 100%; 适配响应式布局 */
}

.text-wrap span {
  white-space: normal; /* 确保文本正常换行，默认值但需避免全局样式覆盖 */
  overflow-wrap: break-word; /* 可选：允许长单词在中间换行，防止溢出 */
}

为什么之前的设置无效？ #

你尝试的display: inline-block或display: block会改变span的布局特性：

• display: block会让每个子span单独占据一行，破坏文本流的连续性
• display: inline-block虽允许元素同行排列，但如果容器无宽度限制，依然不会触发换行

保持span默认的inline显示模式，同时给父div设置宽度限制，文本就会自然根据容器宽度动态换行。

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