标题文字换行问题排查及白色背景实现方案求助

我来帮你搞定这个加白色背景后标题换行的问题！

问题原因分析 #

你当前的CSS是通过inline-block+负margin的方式实现标题两侧的横线，但设置白色背景后，width:100%加上伪元素的width:50%布局逻辑，容易导致文字被横向空间挤压，从而触发换行。这种布局方式在容器内空间计算上不够稳定，尤其是当背景色覆盖整个标题容器时，更容易出现排版冲突。

修复方案：改用Flex布局 #

推荐用Flex布局重构这个标题样式，它能更稳定地实现“文字居中+两侧横线填充”的效果，同时彻底解决换行问题。修改后的代码如下：

CSS代码：

.section-title {
  color: #aaa;
  font-size: 15px;
  font-weight: 600;
  margin: 30px 0;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  /* 改用Flex布局 */
  display: flex;
  align-items: center;
  gap: 1em; /* 文字和横线之间的间距 */
  width: 100%;
  background: #fff; /* 这里可以设置你的白色背景 */
}

.section-title:before, .section-title:after {
  background-color: #aaa;
  content: '';
  /* 让伪元素自动填充剩余空间 */
  flex: 1;
  height: 1px;
}

HTML代码保持不变：

<h4 class="section-title">جميع قوائمك</h4>

方案优势 #

1. Flex布局会自动让左右两条横线平分容器剩余空间，无论文字长度如何，都不会挤压文字导致换行；
2. gap属性可以精准控制文字和横线的间距，比原来的left/.5em更直观；
3. 布局逻辑更清晰，后续修改背景色、文字大小等样式时，不容易出现排版异常。

如果你还是想保留原来的inline-block写法，也可以尝试去掉.section-title的width:100%，或者给文字外面套一层<span>标签并设置white-space: nowrap，不过Flex布局的方案更健壮，推荐使用。

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