如何用CSS让含连字符的长URL在HTML中任意换行而非断在连字符处

我有一个带连字符的URL（放置在列表中，位置不影响问题本质），希望它能像第二个无连字符的URL那样在任意位置换行，而非仅在连字符处断开，以此保持文本间的合理间距。试过多种方法均无效，唯一有效的方案是将连字符替换为不可断连字符‑，但这会破坏链接文本的复制粘贴功能。

相关代码如下：

CSS代码 #

ol, li {text-align: justify;}
a {overflow-wrap: break-word; hyphens: none;}

HTML代码 #

<ol>
  <li>Lorem ipsum dolor sed sed do sit amet, sed sed do econsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna sed sed do aliqua. <a href="some_link">https://www.something.domain/wp-content/uploads/2015/01/some_longlonglonglonglonglonglongfilename.pdf</a> and <a href="some_link">https://www.something.domain/wpcontent/uploads/2015/01/some_longlonglonglonglonglonglonglonglonglonglonglonglonglongfilename.pdf</a></li>
</ol>

可行解决方案 #

方案1：使用word-break: break-all

给链接添加word-break: break-all属性，强制文本在任意字符处换行，不受连字符限制，同时保留正常的复制粘贴功能。修改后的CSS：

ol, li {text-align: justify;}
a {
  overflow-wrap: break-word;
  hyphens: none;
  word-break: break-all;
}

方案2：使用overflow-wrap: anywhere（推荐）

overflow-wrap: anywhere会优先在自然间隙换行，间隙不足时再强制在任意字符处断开，比break-all更贴合排版逻辑，且现代浏览器均支持。修改后的CSS：

ol, li {text-align: justify;}
a {
  overflow-wrap: anywhere;
  hyphens: none;
}

兼容性降级方案

若需兼容旧浏览器，可同时添加两种属性，让现代浏览器优先使用overflow-wrap: anywhere，旧浏览器 fallback 到word-break: break-all：

ol, li {text-align: justify;}
a {
  overflow-wrap: anywhere;
  word-break: break-all;
  hyphens: none;
}

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