Гибкие элементы и разрывы строк

Question

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

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>

SCSS:

* {
  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> или чего-то еще, потому что этот макет должен быть отзывчивым. Есть ли способ сделать ссылку хрупкой?

Answer 1

Просто сделайте ваши элементы inline и удалите flexbox.Вы не можете достичь того, чего хотите, используя flexbox, так как ваши элементы являются элементами уровня блока:

* {
  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 {
  list-style-type: none;
}

.line-up__item {
  display: inline;
  align-items: center;
  margin-right: 3px;
  line-height: 1.45;
}
.line-up__item:after {
  margin-left: 3px;
  font-size: 25px;
  content: '•';
  vertical-align:middle; /*added this too*/
}
.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>