如何让inline-block元素支持自动换行，解决hover缩放布局异常

inline-block 元素从CSS规范层面就不支持内部跨行拆分，你观察到的「长链接跨行拆分」属于视觉错觉，inline-block 始终会作为一个整体盒参与排版，要么完整放在一行，要么整体换行，超出父容器宽度时默认会溢出而非内部拆分。

如果要实现「链接hover放大、同时支持正常跨行拆分」的需求，可以用以下两种成熟方案：

方案1：transform-box 方案（推荐，现代浏览器兼容） #

无需修改a标签默认的inline属性，通过transform-box配置让transform对行内元素生效，完全不影响原生换行逻辑：

div {
  border: 1px solid black;
  text-align: justify;
  width: 20em;
}

a {
  text-decoration: none;
  /* 保留默认行内属性，支持自动换行 */
  display: inline;
  transform-box: fill-box;
  /* 可选：增加过渡动画更顺滑 */
  transition: transform 0.15s ease;
}

a:hover {
  transform: scale(1.01);
}

这个方案兼容Chrome 64+、Firefox 55+、Safari 11.1+，覆盖绝大多数当前活跃的浏览器版本，不会影响原有文本排版逻辑。

方案2：兼容旧浏览器的替代方案 #

如果需要兼容不支持transform-box的旧版本浏览器，可以用text-shadow模拟轻微放大效果，完全不影响换行：

a:hover {
  /* 四个方向加极细的同色阴影模拟放大效果，不会影响布局 */
  text-shadow: 0 0 0.5px currentColor, 0 0 0.5px currentColor;
}

这个方案的放大效果不如transform精准，但兼容性极强，所有支持CSS2的浏览器都可以正常运行。

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