如何使用CSS打破HTML中包含连字符的长URL

Question

我有一个包含连字符的 URL（在列表中，可能不重要）。我希望它在网址中的任何位置而不是在连字符处中断，就像第二个没有连字符的网址那样，以在单词之间保留合理的空白。我怎样才能做到这一点？

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

 <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>

我尝试了各种方法，但没有任何效果。唯一有效的方法是将连字符替换为不间断的连字符，例如

‑

，但这会破坏复制链接文本并将其粘贴到浏览器中的操作。

Answer 1

您正在寻找

word-break: break-all;

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

<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>