如何限制内联anchor锚点元素宽度 解决Chrome长链接不换行问题

Chrome 浏览器默认不会对连续无空白字符的长文本（例如无断句的URL链接）执行自动换行，同时原生<a>标签为行内（inline）元素，直接对行内元素设置宽度约束、断行规则无法按预期生效。此前修改display属性未生效的核心原因是仅调整了元素显示类型，未配套跨浏览器兼容的断行规则，且原有样式存在容器宽度被内边距撑大的隐性问题。

替换原有代码即可，兼容Chrome、Firefox、Edge等所有主流浏览器：

<!DOCTYPE html>
<html>
  <head>
    <title>脚注提示Demo</title>
    <style>
      sup.footnote::after {
        content: attr(data-count);
      }
      sup.footnote:hover {
        cursor: help;
        position: relative;
      }
      sup.footnote cite {
        display: none;
      }
      sup.footnote:hover cite {
        display: inline-block;
        position: absolute;
        top: 0;
        left: -50%;
        width: 250px;
        /* 修复尺寸计算问题：内边距纳入总宽度，避免容器被padding撑大 */
        box-sizing: border-box;
        background: #f0f0f0;
        border: 1px dotted #c0c0c0;
        border-radius: 8px;
        margin: 10px;
        padding: 8px;
      }
      /* 长链接兼容断行规则 */
      sup.footnote cite a {
        display: block;
        width: 100%;
        /* 跨浏览器自动换行属性组合 */
        white-space: normal;
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: break-word;
      }
    </style>
  </head>
  <body>
    <p>
      这是一个HTML脚注功能的示例
      <sup class="footnote" data-count="1">
        <cite>
          <span>[示例说明]</span>&nbsp;脚注解释内容：
          <a lang="en" href="#">
            http://example.com/test/test/abde4/iabcde/009909asdf/vandsfk23/verylong/gghhy.pdf
          </a>
        </cite>
      </sup>
    </p>
  </body>
</html>

• box-sizing: border-box：修复原有样式的尺寸偏差问题。原样式设置width: 250px后叠加左右各8px内边距，容器实际渲染宽度为266px，添加该属性后内边距会被包含在250px宽度内，尺寸完全符合预期。
• display: block + width: 100%：将默认行内的<a>标签转为块级元素，使其完全受父容器<cite>的宽度约束，不会超出父级边界。
• 断行属性组合覆盖全场景兼容：word-break: break-word只会在连续长字符串超出容器宽度时触发断行，不会对正常有空格分隔的英文单词做无意义截断，阅读体验优于break-all；其余两个断行属性是对老版本浏览器的兼容兜底。

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