Текст заголовка вне аккордеона

Question

Я пытаюсь использовать аккордеонный компонент из библиотеки Bootstrap 4. Это нормально работает. Но если заголовок будет содержать длинный заголовок, например:

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque debitis aliquid numquam iure saepe eum, unde hic eligendi quisquam, neque dolorem officia magnam. Aut recusandae ipsam doloribus, cumque alias eum.
        </button>
      </h5>
    </div>

    ...

</div>

Выходит за пределы контейнера.

Как перенести текст на новую строку?

Я сократил пример до JSFiddle

Answer 1

Добавить

.card button{
  white-space:normal;
}

на ваш css

Вы получаете эту проблему, потому что стиль кнопки содержит white-space:nowrap

Вы должны переопределить это, добавив выше css

JSFiddle Ссылка