Is it possible to break only long links?
css add tag
ArtOfCode 
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?
Top Answer
James Douglas 
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:
```
<div>
  <a href=".">this is a long link with spaces</a>
  <br>
  <br>
  <a href=".">https://s3.amazonaws.com/storage.qpixel.artofcode.co.uk/SCaH3gCWRcGUAUm7wHfBgQo2</a>
</div>
```
```css
div {
  background: grey;
  width: 100px;
  overflow-wrap: break-word;
}
```
![Screenshot 2020-05-11 at 08.25.26.png](/image?hash=14c198c8abe5ef89b240ca64a302bae91aa8df176796c37550ad44c51ed158db)

[Here's a JSFiddle to play around with](https://jsfiddle.net/7u031fLk/)
comments
transcript

Enter question or answer id or url (and optionally further answer ids/urls from the same question) from

Separate each id/url with a space. No need to list your own answers; they will be imported automatically.