文章/答案/技术大牛

发布

问折叠面板外的页眉文本
EN

Stack Overflow用户

提问于 2018-08-28 16:52:21

回答 1查看 158关注 0票数 0

我尝试使用Bootstrap 4库中的accordion组件。它工作得很好。但如果header包含一个不同的长标题，如下所示：

<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

css

twitter-bootstrap

bootstrap-4

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-08-28 17:03:54

添加

.card button{
  white-space:normal;
}

到你的css

您会遇到这个问题，因为按钮样式包含white-space:nowrap

您需要通过添加上面的css来覆盖它

JSFiddle Link

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52053788

复制

相似问题

问折叠面板外的页眉文本
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问折叠面板外的页眉文本EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问折叠面板外的页眉文本
EN