How to break up long links with CSS

14 August, 2019
Time to read: 1 mins
CSS

Problem

You have a really long link, for example, a link to a GitHub issue, and it overflows the container. This will usually happen in a mobile layout:

This is the code for the link:

<a
  href="https://github.com/facebook/react/issues/14920#issuecomment-471070149"
  style={{ color: "#f18fe8" }}
>
  https://github.com/facebook/react/issues/14920#issuecomment-471070149
</a>

This can happen if you create a link in Markdown and you forget to give it a title:

## Useful links

- [https://github.com/facebook/react/issues/14920#issuecomment-471070149](https://github.com/facebook/react/issues/14920#issuecomment-471070149)

Solution

To solve this, either write a descriptive text for the link—the best solution—or use one of the following CSS properties:

And if you do that, this is the result:

<a
  href="https://github.com/facebook/react/issues/14920#issuecomment-471070149"
  style={{
    color: "#f18fe8",
    wordBreak: "break-word",
  }}
>
  https://github.com/facebook/react/issues/14920#issuecomment-471070149
</a>

Other things to read

Popular

Previous/Next