Flex-элементы и разрывы строк

У меня есть этот макет (проверить на кодепене) с этим кодом:

HTML:

<div class = "line-up">

  <!--line up list-->
  <ul class = "line-up__list">

    <!--line-up item-->
    <li class = "line-up__item"><a class = "line-up__link" href = "line-up-details.html" title = "Alva Noto Unieqav (Live)"><strong>Alva Noto Unieqav</strong>(Live)</a></li>

    <!--line-up item-->
    <li class = "line-up__item"><a class = "line-up__link" href = "line-up-details.html" title = "Anetha"><strong>Anetha</strong></a></li>

    <!--line-up item-->
    <li class = "line-up__item"><a class = "line-up__link" href = "line-up-details.html" title = "Antigone &amp; Shlømo présentent Luxor (Live) "><strong>Antigone &amp; Shlømo</strong>présentent<strong>Luxor</strong>(Live)</a></li>

    <!--line-up item-->
    <li class = "line-up__item"><a class = "line-up__link" href = "line-up-details.html" title = "Bonaventure"><strong>Bonaventure</strong></a></li>

    <!--line-up item-->
    <li class = "line-up__item"><a class = "line-up__link" href = "line-up-details.html" title = "Ciel"><strong>Ciel</strong></a></li>
  </ul>
</div>

СКСС:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.line-up {
  max-width: 600px;
  margin: 40px auto 0px auto;
  padding: 20px;
  background-color: #e8c0a0;
}

.line-up__list {
  display: flex;
  flex-wrap: wrap;

  list-style-type: none;
}

.line-up__item {
  display: inline-flex;
  align-items: center;
  margin-right: 3px;

  line-height: 1.45;

  //decoration element
  &:after {
    margin-left: 3px;

    font: {
      size: 25px;
    }

    content: '•';
  }

  &:last-child {

    &:after {
      display: none;
    }
  }
}

//line up links styles
a.line-up__link {

  //bigger item styles
  strong {
    display: inline-block;
    margin: 0 3px;

    font: {
      size: 19px;
    }

    &:first-child {
      margin-left: 0;
    }
  }
}

@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.line-up {
  max-width: 600px;
  margin: 40px auto 0px auto;
  padding: 20px;
  background-color: #e8c0a0;
}

.line-up__list {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
}

.line-up__item {
  display: inline-flex;
  align-items: center;
  margin-right: 3px;
  line-height: 1.45;
}

.line-up__item:after {
  margin-left: 3px;
  font-size: 25px;
  content: '•';
}

.line-up__item:last-child:after {
  display: none;
}

a.line-up__link strong {
  display: inline-block;
  margin: 0 3px;
  font-size: 19px;
}

a.line-up__link strong:first-child {
  margin-left: 0;
}

<div class = "line-up">

  <!--line up list-->
  <ul class = "line-up__list">

    <!--line-up item-->
    <li class = "line-up__item"><a class = "line-up__link" href = "line-up-details.html" title = "Alva Noto Unieqav (Live)"><strong>Alva Noto Unieqav</strong>(Live)</a></li>

    <!--line-up item-->
    <li class = "line-up__item"><a class = "line-up__link" href = "line-up-details.html" title = "Anetha"><strong>Anetha</strong></a></li>

    <!--line-up item-->
    <li class = "line-up__item"><a class = "line-up__link" href = "line-up-details.html" title = "Antigone &amp; Shlømo présentent Luxor (Live) "><strong>Antigone &amp; Shlømo</strong>présentent<strong>Luxor</strong>(Live)</a></li>

    <!--line-up item-->
    <li class = "line-up__item"><a class = "line-up__link" href = "line-up-details.html" title = "Bonaventure"><strong>Bonaventure</strong></a></li>

    <!--line-up item-->
    <li class = "line-up__item"><a class = "line-up__link" href = "line-up-details.html" title = "Ciel"><strong>Ciel</strong></a></li>
  </ul>
</div>

Проблема в длинной ссылке, которая просто не рвется и оставляет много пустого места: И я просто хочу, чтобы этот текст разбивался на 2 строки без тега <br> или чего-то еще, потому что этот макет должен быть адаптивным. Есть ли способ сделать ссылку разрываемой?