I have a URL (in a list, probably not important) that contains a hyphen. I would like it to break anywhere in the url and not at hyphen, like the second url without a hyphen does, to keep reasonable blanks between words. How can I make it so?
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>
I tried various approaches but nothing works. The only that works is replacing the hyphen with unbreaking hyphen like ‑
, but that breaks copying the link text and pasting it into a browser.
You are looking for 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>