The following div is sized to 400 pixels wide to simulate a narrow width device. It contains a link to Amazon. (A random link, some Oragnic Fair Trade Coffee). You can see that the link overflows the div. On a mobile device, it would overflow the page, causing a horizontal scroll bar to appear.
So, why doesn't the text wrap in its container, as other text does? The browser is expecting to see standard text (words), and will look to insert a line break at any of the usual line break opportunities — a space, a hyphen, a comma, a period, a question mark, etc.
Since the box contains a url, and not text, the first line break opportunity is the question mark. The browser can't find a location to insert a line break, and has no choice but to permit the line to overflow its parent.
Assuming we don't want to add a horizontal scroll bar (CSS overflow: auto), or clip the overflow (CSS overflow: hidden), we can fix the problem by allowing the browser to insert a line break at any character.
span {
word-break: break-all;
}