绝对定位子元素单词换行原因及解决，保留父元素圆形并调整布局

一、单词自动换行的原因 #

父元素.first的宽度只有8px，而绝对定位的子元素.second的布局参考是父元素（因为父元素设置了position: relative）。子元素未明确设置宽度时，它的最大可用宽度被限制在父元素的8px范围内，文本只能在这个窄宽度里换行，每个单词超过宽度就会自动折行。

二、解决方案（保持父元素圆形，子元素下移、居中且宽度自适应） #

调整子元素样式即可实现需求：

• 给.second设置width: max-content，让宽度完全适配文本内容，摆脱父元素窄宽度的限制；
• 使用top: 100%将子元素定位到父元素的正下方，搭配margin-top可调整与父元素的间距（可选）；
• 保留left: 50%和transform: translateX(-50%)实现水平居中；
• 添加white-space: nowrap确保文本不会随意换行，配合width: max-content更稳妥。

修改后的CSS代码 #

.first {
  top: 12px;
  left: 100px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  margin: 2px;
  background-color: blue;
  color: #333; /* 修改文字颜色，避免与背景色重合导致不可见 */
}

.second {
  position: absolute;
  width: max-content; /* 宽度适配文本内容 */
  white-space: nowrap; /* 强制文本不换行 */
  left: 50%;
  transform: translateX(-50%);
  top: 100%; /* 定位到父元素下方 */
  margin-top: 4px; /* 增加与父元素的间距，可选 */
}

HTML代码保持不变 #

<div class="first">
  <div class="second">test test test</div>
</div>

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