It has become increasingly important to make sure your layout doesn't break when viewing your Website on a phone. So what do you do when, in Android or Google Chrome, you notice that your layout is blowing out because of an especially long word (or line of unbroken text, like a URL)?

It turns out, there's a specific fix for this very problem. In your CSS, target the container in which the troublesome URL (or ridiculously long word) is pushing out your container, and add this declaration:
word-wrap: break-word;

For example:

.content { word-wrap: break-word;}

This will take care of the problem in most cases. HOWEVER! If you are experiencing this problem inside of an HTML table (and yes, occasionally we do have to put a URL inside a table per the needs of the project or client), you'll need to add another rule to your CSS.

Specifically, you need to tell the HTML table to stop listening to that pesky URL that wants to make it wider than you want it to be. You do this in your CSS by giving the table a rule with the declarations:
table-layout:fixed; width:100%;

For example:

.content table { table-layout:fixed; width:100%;}