div宽度过小时，居中span文本挤压换行的解决需求

需求：将span文本居中置于div上方，文本需随div宽度变化保持居中，且无论div宽度多小，文本始终单行显示。

• 期望效果：当div宽度为150px时，文本完整单行居中显示在div顶部上方
• 不希望的效果：当div宽度小于145px时，文本被挤压换行

当前代码存在的问题：span使用left:15%; right:15%限制了宽度，容器变窄时文本空间不足导致换行。

解决方案 #

修改span的CSS样式，通过以下几点实现需求：

• 取消left和right的百分比约束，改用left: 50%配合transform: translateX(-50%)实现精准居中
• 添加white-space: nowrap强制文本保持单行
• 调整宽度为自适应内容，避免被容器宽度限制

修改后的完整代码 #

CSS代码

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  height: 400px;
  width: 400px;
  border: 1px solid gray;
  margin-top: 50px;
}

.div1brother {
  position: relative;
  border-left: 0.01px solid black;
  border-right: 0.01px solid black;
  border-top: 0.01px solid black;
  margin-bottom: 3px;
  width: 150px; /* 可自行调整宽度测试效果 */
  height: 100px;
  margin-top: 25px;
}

.div1brother span {
  position: absolute;
  left: 50%;
  top: -15px;
  transform: translateX(-50%);
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  text-align: center;
  font-weight: bolder;
  white-space: nowrap; /* 强制单行 */
}

HTML代码

<div class="container">
  <div class="div1brother">
    <span>Cutter O.D. = 25</span>
  </div>
</div>

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