如何消除文本换行导致的<h1>标签多余宽度？

h1默认是块级元素，宽度会占满父容器的100%，所以即使文本换行，元素依然会撑满父容器宽度，导致看起来有多余空白。以下几种方法可以让h1的宽度贴合实际文本长度：

• 使用display: inline-block
  让元素兼具行内元素的宽度自适应特性和块级元素的样式支持：

  h1 {
    display: inline-block;
  }
  

  这个方法能让h1的宽度完全匹配文本（包括换行后的多行内容），同时可以保留h1原本的块级样式（比如上下外边距）。

• 使用width: fit-content
  直接让元素宽度适配内容的实际需求，是最直观的解决方案：

  h1 {
    width: fit-content;
  }
  

  如果需要让h1在父容器中居中，可以搭配margin: 0 auto使用，既适配内容宽度又能实现居中对齐。

• 使用display: table
  利用表格元素的收缩包裹特性，兼容性比fit-content更好（适配旧版浏览器）：

  h1 {
    display: table;
  }
  

  效果和inline-block类似，但在一些复杂布局场景下表现更稳定。

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