htmlcssline-breakstypography

How to break long URL that contains hyphens in HTML with CSS


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 &#8209;, but that breaks copying the link text and pasting it into a browser.


Solution

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