CSS.Разбить текст внутри кнопки начальной загрузки

Question

Так что в основном я использую bootsrap, и у меня есть гармошка складных кнопок.Кнопки имеют 2 столбца текста и один значок справа.

Я пытаюсь разбить текст во втором столбце на несколько строк, чтобы он поместился в кнопке.

Любойидеи?

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

https://codepen.io/averied/pen/gBoxbw

Мне нужно разбить текст внутри div id = "bloc2"

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
   <div class="col col-lg-4">
      <div id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
         <div id="block_container" cols="4">
                        <div  id="bloc1">SmallText</div>
                        <div  id="bloc2">Please break this text it's very large and doesn't fit</div>
                        <button id="delbtn"/></button>
                    </div>
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
         labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
      <div class="card-body">
        labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
      <div class="card-body">
        labore sustainable VHS.
      </div>
    </div>
  </div>
</div>
    </div>
  </div>
</div>  

Answer 1

Сначала вам нужно изменить #block_container, чтобы включить flex-wrap: wrap;.Попробуйте изменить CSS следующим образом:

#block_container
{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    cursor: pointer;
}

И

#bloc2 {
display: flex;
justify-content: center;
flex-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}

Я не уверен, почему вы хотите, чтобы ваша кнопка увеличивалась по высоте, а не ellipsis текст.

https://codepen.io/anon/pen/rqpGwe

Answer 2

Добавить специальный класс к btn, как ...

.text-wrap {
  white-space: normal;
}

И удалить word-break: break-all; из блока2 ...

https://codepen.io/anon/pen/ePyGRJ

Answer 3

Вы можете использовать

#bloc2 { white-space: normal; }