Responsive solution for long URLs (that exceed the device width)

Question

As the title implies, while building responsive sites, I often run into an issue with long(ish) URLs breaking my fluid grid and causing horizontal scrolling on smaller devices. Because they're one long string, they don't wrap and push the width of their container to wider than the device width...

 <--device-->
______________
|             |
| http://longurlthatdoesntfit.com
|             |
|             |

Sometimes I make the container overflow:hidden but that just chops off the end of the URL and it tends to lock glitchy. Another approach might be to shrink the font-size on smaller devices, but in situations where the URL lengths vary, it would mean shrinking it WAY down to ensure it always has enough space.

There must be a better way.

Answer 1

If neither hiding or scrolling overflow work for you, consider forcefully word wrapping in CSS:

word-wrap: break-word;