当为 <a> 标签设置 display: block 时，它会默认撑满父容器宽度，导致点击区域远超文字范围；通过添加 max-width: fit-content 可精准限制其宽度至文本实际尺寸，解决“文字外区域仍可点击”的问题。
在 Web 开发中，常需将链接（<a>）设为块级元素以方便布局或添加内边距/背景等样式，但直接使用 display: block 会使该元素无视内容宽度、独占一行并横向铺满父容器——这不仅影响视觉，更会导致点击热区过大：用户在“Hello World”右侧大片空白处点击，依然触发链接跳转，体验不直观且易误操作。
根本原因在于：display: block 的默认行为是生成一个块级格式化上下文中的矩形框，其宽度由包含块决定，而非内容本身。
✅ 正确解法是保留 display: block（满足布局需求），同时叠加 max-width: fit-content：
#footer-text {
display: block;
max-width: fit-content;
}fit-content 是 CSS 的现代宽度关键字，含义为“取 min(max-content, available-width)”，即：在可用空间内，尽可能紧凑地包裹内容，绝不超出文本真实宽度。它兼容所有现代浏览器（Chrome 69+、Firefox 66+、Safari 14.1+、Edge 79+），无需额外 hack。
⚠️ 注意事项：
- 避免使用 width: fit-content（无 max- 前缀）——它可能被部分旧版浏览器忽略，且在某些布局中表现不稳定；
- 不推荐改用 display: inline-block 作为替代方案，因其会引入行内元素特有的基线对齐、空白符敏感等问题，增加维护复杂度；
- 若需支持 IE 或极老版本浏览器，可降级为 display: inline-block + vertical-align: top，但 fit-content 已覆盖当前主流环境。
最终效果：<a id="footer-text">Hello World</a> 仅渲染为刚好容纳“Hello World”文字的矩形区域，点击热区与视觉范围完全一致，兼顾语义、样式可控性与用户体验。
