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

sUP
April 10, 2024
138 views
3 votes
3 Answers

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.

Answers

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>

You can also use line-break: anywhere;

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

<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 think word-break: break-all; (without the other settings) will suffice:

ol,
li {
  text-align: justify;
}

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

Please signup or login to give your own answer.

Click here to cancel reply.