I have a system that renders Markdown. People like to add spurious links to their posts without prettifying them; so, instead of [a nice link like this](https://s3.amazonaws.com/storage.qpixel.artofcode.co.uk/SCaH3gCWRcGUAUm7wHfBgQo2), they'll just use the bare link: https://s3.amazonaws.com/storage.qpixel.artofcode.co.uk/SCaH3gCWRcGUAUm7wHfBgQo2.
That presents a problem for displaying them: text wrapping. If I don't apply any wrapping to the link, it overflows its container and causes layout issues. There's a bunch of CSS rules I could apply to fix it: `overflow-wrap`, `flex-wrap`, `word-break`, and `white-space` spring to mind, but I don't know the specifics of how they work.
I'd like to force long links like the above to wrap in the middle of the link, wherever makes sense - but I'd also like text links, which might have spaces in them, to wrap sensibly at the spaces instead of the middle of the words. What CSS rules can I use to get that effect?
Unless I've misunderstood your question, the CSS rule [`overflow-wrap`](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap) should do the trick.
According to MDN (emphasis mine):
> The overflow-wrap CSS property applies to inline elements, setting whether the browser should **insert line breaks within an otherwise unbreakable string to prevent text from overflowing its line box.**
See example below:
<a href=".">this is a long link with spaces</a>
![Screenshot 2020-05-11 at 08.25.26.png](/image?hash=14c198c8abe5ef89b240ca64a302bae91aa8df176796c37550ad44c51ed158db)
[Here's a JSFiddle to play around with](https://jsfiddle.net/7u031fLk/)