手风琴外的标题文本

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 Link