CSS：如何让普通文本与hover加粗文本保持一致换行

嘿，这个场景太常见了！你想要的就是让按钮文本在常态下就和hover加粗时的换行位置完全一致，这样hover的时候只有字体粗细变化，不会突然换行，过渡超平滑对吧？

我给你推荐个兼容性拉满的方案，核心思路是用一个透明的加粗文本“占位”，让容器提前计算好加粗后的换行位置，真实文本叠在上面，hover时只需要把真实文本改成加粗就行。

具体实现步骤： #

• 给按钮加一个data-text属性，值和按钮内的文本完全一致（方便CSS调用）
• 用伪元素生成一个透明的加粗文本，让它占据按钮的宽度空间，这样容器会按照加粗文本的宽度来换行
• 常态下真实文本保持正常粗细，hover时切换为加粗，布局完全不变

代码示例： #

<button class="launch" data-text="This is example text">This is example text</button>

button.launch {
  border: none;
  width: 120px;
  position: relative;
  text-align: left; /* 保持和伪元素对齐，可根据需求调整 */
  line-height: 1.4; /* 确保行高一致，避免细微偏移 */
}

/* 透明加粗文本占位，决定换行位置 */
button.launch::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-weight: bold;
  color: transparent;
  pointer-events: none; /* 不干扰按钮的点击交互 */
  line-height: inherit; /* 继承父元素行高 */
}

button.launch:hover {
  font-weight: bold;
}

原理说明： #

伪元素的透明加粗文本会让浏览器按照加粗后的文本宽度来计算换行，而真实文本叠在它上面，所以常态下的换行位置和hover加粗时完全一致。当你hover按钮时，只是把真实文本的字体粗细改成加粗，布局没有任何变化，自然就不会有突兀的换行跳动了。

如果你的文本是动态生成的，只需要用JS同步更新data-text属性和按钮内的文本内容就行，非常灵活！

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