Breaking words in a word cloud (with html, js, css)?

Question

I cannot make breaking large words (links) in a word cloud app:

https://codepen.io/huqedato/pen/yLEBaaq

    .tags {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        max-width: 60%;
        margin: auto;
        padding: 0;
        list-style: none;
        border: rgb(0, 0, 0) solid
    }

    .tag {
        display: flex;
        align-items: center;
        margin: 0.01rem 0.3rem;
    }

    .tag-link {
        padding: 5px 5px 0;
        transition: 0.3s;
        text-decoration: none;
    }

I've already tried using word-wrap, overflow-wrap on the anchor tag and/or parent Please help.

Answer 1

Add word-break: break-all; to your .tags:

.tags {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      max-width: 60%;
      margin: auto;
      padding: 0;
      list-style: none;
      border: rgb(0, 0, 0) solid;
      word-break: break-all;   <--------
}

Image:

---

You can either use hyphens: auto; as Andrei Fedorov suggested:

.tags {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      max-width: 60%;
      margin: auto;
      padding: 0;
      list-style: none;
      border: rgb(0, 0, 0) solid;
      hyphens: auto;          <--------
}

Image: