flex布局文本换行时h1不收缩 如何让图标始终紧跟文本

解决方案 #

该需求可以实现，问题的核心原因是h1作为块级元素默认会占满父容器剩余宽度，就算内部文本换行后元素本身宽度不会自动收缩到文本实际宽度，所以图标和文本之间会出现多余空隙。

你可以通过给h1设置内容适配宽度的方式解决，修改后的CSS代码如下：

.container {
  display: flex;
  flex-direction: row;
  align-items: center; /* 可选，用于让图标和h1文本垂直居中对齐 */
}

h1 {
  width: fit-content;
  /* 兼容低版本浏览器可以补充前缀 */
  width: -webkit-fit-content;
  width: -moz-fit-content;
}

修改后无论h1内的文本是单行显示还是换行显示，h1的宽度都会自动贴合文本的实际占用宽度，图标就会始终紧跟在h1文本的后方，不会出现多余空隙。效果可参考下图：

补充说明：如果需要兼容非常老旧的浏览器，也可以将h1设置为display: inline-block，效果和fit-content基本一致，仅需注意这种方式会部分丢失部分块级元素特性。

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