How to do line breaks for long urls?

Use hyphens to breaks from any hyphen. As in the urls there is no space available.

hyphens: auto;

Use following css class:

.break-any-thing {
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  hyphens: auto;
}