inline-flex锚点内两行Span如何仅适配内容宽度？

要让红色背景恰好贴合文字内容的宽度，只需调整span的样式，让它的宽度收缩到自身内容的最大宽度，同时保持在锚点内居中。修改后的代码如下：

a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 167px;
  height: 75px;
  text-decoration: none;
  border: 1px solid black;
}

span {
  background-color: red;
  color: white;
  text-align: center;
  /* 核心：让span宽度适配内容最长行 */
  width: fit-content;
}

如果担心部分旧浏览器不支持fit-content，也可以用display: inline-block替代，同样能实现宽度收缩的效果：

span {
  background-color: red;
  color: white;
  text-align: center;
  display: inline-block;
}

原理很简单：默认情况下，flex容器内的span会被拉伸至锚点的宽度，加上width: fit-content或display: inline-block后，span的宽度会自动调整为内容中最长一行的宽度，红色背景也就刚好包裹文字范围，再借助锚点的justify-content: center和align-items: center，让span保持在锚点内居中对齐。

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