网页文本溢出内边距问题求助：文本未按预期换行

这个问题的核心是你用的<span>是行内元素（inline）——它的padding虽然会在视觉上占据空间，但文本换行逻辑完全不会考虑padding的存在，只会在父容器的边缘才触发换行，直接忽略了你给span设置的左右内边距。

咱们只需要给.fw-heading .fw-special-title span添加几个关键属性就能解决：

.fw-heading .fw-special-title span {
  background: #fff;
  font: inherit;
  padding: .5rem 1.5rem;
  /* 新增以下属性 */
  display: inline-block; /* 把行内元素转为行内块，让padding参与宽度计算 */
  max-width: 100%; /* 限制span最大宽度不超过父容器 */
  word-wrap: break-word; /* 确保长单词/文本能在合适位置换行 */
  box-sizing: border-box; /* 让padding包含在元素宽度内，避免超出 */
}

各属性的作用说明： #

• display: inline-block：将span从行内元素转为行内块元素，这样元素的padding、margin都会正确参与布局计算，文本换行时会优先考虑span的内边距范围，而不是直接撑到父容器边缘。
• max-width: 100%：确保span不会因为内容过长而超出父容器的宽度边界。
• word-wrap: break-word：针对荷兰语这类可能出现长复合词的场景，强制让单词在合适的位置拆分换行，避免文本超出span范围。
• box-sizing: border-box：让padding和border都包含在元素的宽度计算内，不会因为额外的padding导致元素总宽度超出预期。

修改后的完整CSS代码：

* { box-sizing: border-box; } 
.fw-heading.fw-heading-center { text-align: center; } 
.fw-heading { margin-bottom: 1em; } 
.fw-heading .fw-special-title { position: relative; z-index: 1; margin-bottom: 0; font-weight: 200; } 
.fw-heading .fw-special-title::before { border-bottom: 2px solid #002e50; content: ""; margin: 0 auto; position: absolute; top: 50%; left: 0; right: 0; width: 100%; z-index: -1; } 
.fw-heading .fw-special-title span { 
  background: #fff; 
  font: inherit; 
  padding: .5rem 1.5rem;
  display: inline-block;
  max-width: 100%;
  word-wrap: break-word;
  box-sizing: border-box;
} 
h2 { font-size: 2rem; }

这样调整后，文本就会乖乖在span的padding范围内正确换行，不会再忽略内边距啦！

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