通过设置 max-width: fit-content 可限制 display: block 元素的宽度为其文本内容的实际尺寸，从而消除右侧无效点击区域。

通过设置 `max-width: fit-content` 可限制 `display: block` 元素的宽度为其文本内容的实际尺寸，从而消除右侧无效点击区域。

在 Web 开发中， 标签默认为内联元素（inline），其点击区域天然贴合文字内容。但当显式设置 display: block 后，该元素会扩展为独占一行、宽度撑满父容器的块级框——即使内容只有“Hello World”，其可点击区域也会延伸至右侧大量空白处，造成 UX 问题（如误触、焦点范围过大等）。

要保留 display: block（例如为后续添加 margin、padding 或垂直居中等布局需求），同时严格约束宽度仅包裹文字，推荐使用现代 CSS 的 fit-content：

#footer-text {
  display: block;
  max-width: fit-content;
}

✅ 效果说明：

html css布局产品功能展示效果

网站常用产品功能展示效果，鼠标悬停高亮，图标旋转

下载

• fit-content 是 CSS max-width 的合法值，使元素最大宽度等于其内容固有宽度（intrinsic width），即“Hello World”所占像素宽度；
• 元素仍保持块级特性（可设置上下 margin/padding、支持 text-align 等），但不会横向溢出；
• 兼容性良好：Chrome 69+、Firefox 66+、Safari 14.1+、Edge 79+（Can I use fit-content）；旧版浏览器可降级为 display: inline-block（但会失去纯 block 的部分布局能力）。

⚠️ 注意事项：

• 避免使用 width: fit-content（非标准写法，部分浏览器不支持）；必须用 max-width: fit-content；
• 若需居中对齐，配合 margin: 0 auto 即可；
• 不要依赖 white-space: nowrap 或 overflow: hidden 曲线救国——它们无法真正缩小点击区域，仅视觉遮盖。

总结：max-width: fit-content 是解决“block 元素点击区域过大”问题的标准、语义清晰且可维护的方案，兼顾功能需求与可访问性。