如何用CSS自动调整h1元素宽度以适配滚动后的窗口

当页面存在无换行的超长文本（如示例中p标签的内容）时，会撑开页面的横向宽度，但h1这类默认块级元素的宽度仅基于初始视口宽度，滚动后就会出现h1宽度不足的情况。以下是几种可行的CSS解决方案：

方案1：通过父容器适配宽度 #

给父容器（比如body）设置min-width: fit-content，让父容器被超长内容撑开，同时将h1的宽度设为100%，使其跟随父容器的实际宽度：

body {
  min-width: fit-content;
}

h1 {
  white-space: nowrap;
  font-size: 12pt;
  color: #390F39;
  padding: 12px 0 12px 12px;
  margin: 0 0 12px -12px;
  width: 100%;
  background: rgba(0, 0, 0, 0) linear-gradient(45deg, rgb(220, 220, 220) 35%, rgba(220, 220, 220, 0.95) 100%) repeat scroll 0 0;
  text-shadow: -1px -1px 1px #FFFFFF;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
}

方案2：直接调整h1的宽度属性 #

给h1设置min-width: 100%确保其至少覆盖初始视口，再搭配width: fit-content让它自动适配被超长内容撑开的页面宽度：

h1 {
  white-space: nowrap;
  font-size: 12pt;
  color: #390F39;
  padding: 12px 0 12px 12px;
  margin: 0 0 12px -12px;
  min-width: 100%;
  width: fit-content;
  background: rgba(0, 0, 0, 0) linear-gradient(45deg, rgb(220, 220, 220) 35%, rgba(220, 220, 220, 0.95) 100%) repeat scroll 0 0;
  text-shadow: -1px -1px 1px #FFFFFF;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
}

方案3：使用table布局 #

将h1的display设为table，table元素会自动适配父容器的最大宽度（包括被超长内容撑开的宽度），同时保持占满可用空间：

h1 {
  white-space: nowrap;
  font-size: 12pt;
  color: #390F39;
  padding: 12px 0 12px 12px;
  margin: 0 0 12px -12px;
  display: table;
  width: 100%;
  background: rgba(0, 0, 0, 0) linear-gradient(45deg, rgb(220, 220, 220) 35%, rgba(220, 220, 220, 0.95) 100%) repeat scroll 0 0;
  text-shadow: -1px -1px 1px #FFFFFF;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
}

内容的提问来源于Stack Exchange，提问作者匿名用户