当为 标签设置 display: block 时，它会默认撑满父容器宽度，导致文字右侧出现不可见但可点击的空白区域；通过添加 max-width: fit-content 可约束其宽度严格匹配文本内容，消除多余点击热区。

当为 `` 标签设置 `display: block` 时，它会默认撑满父容器宽度，导致文字右侧出现不可见但可点击的空白区域；通过添加 `max-width: fit-content` 可约束其宽度严格匹配文本内容，消除多余点击热区。

在 Web 开发中，常因样式需求将内联元素（如 ）设为 display: block，以支持上下边距、内边距或垂直居中等布局操作。但此举会触发块级元素的默认行为：自动扩展至父容器可用宽度的 100%，即使内容仅是“Hello World”这样短小的文本——结果就是链接实际可点击区域远大于视觉所见，造成 UX 隐患（例如误触、与邻近元素交互冲突）。

解决的关键在于保持 block 显示模式的同时，主动限制其宽度。推荐方案是使用现代 CSS 属性：

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

fit-content 是一个兼容性良好（Chrome 69+、Firefox 63+、Safari 14.1+、Edge 79+）的宽度计算关键字，它等效于 max-content 与 min-content 的安全折中——即“刚好容纳内容所需的最小宽度”，不会溢出，也不过度收缩。相比 inline-block 或 float 等替代方案，它无需改变文档流结构，语义清晰，且保留了块级元素的所有布局能力（如 margin、padding、text-align 等完全可用）。

135AI排版

一款AI办公效率工具，主要用于135AI排版，AI一键生成高颜值图文排版，适合需要提升相关任务效率的用户。

下载

⚠️ 注意事项：

• 若需支持旧版 Safari（
• 避免使用 width: fit-content（无 max- 前缀），因其不具回退机制，在不支持浏览器中会失效；
• 不要依赖 white-space: nowrap 单独解决——它仅防换行，无法约束块级元素的横向扩张。

综上，max-width: fit-content 是兼顾语义、兼容性与可维护性的最优解：既保留 display: block 的布局优势，又精准收束点击区域，让“Hello World”真正只在它出现的地方被点击。