Bootstrap 如何 Package 太长的标题在下拉按钮从React引导？

ecr0jaav 于 2023-02-27 发布在 Bootstrap

关注(0)|答案(2)|浏览(118)

我有一个下拉按钮，但是，它的（动态改变）标题可能太长，以适应。因此，我想知道是否有一种方法来自动 Package 太长的标题到第二行？

<Panel >
       <Panel.Body collapsible>

           <ButtonGroup vertical >

                    dsadas
                    <DropdownButton title="Dropdown2re12r412r12r12r2r2">
                        <MenuItem eventKey="1">Dropdown link</MenuItem>
                        <MenuItem eventKey="2">Dropdown link</MenuItem>
                    </DropdownButton>
                    fwf21
                    <DropdownButton title="Dropdown" >
                        <MenuItem eventKey="1">Dropdown link</MenuItem>
                        <MenuItem eventKey="2">Dropdown link</MenuItem>
                    </DropdownButton>

            </ButtonGroup>
        </Panel.Body>
    </Panel>

编辑：添加屏幕截图

twitter-bootstrap

来源：https://stackoverflow.com/questions/51412357/how-to-wrap-too-long-title-in-dropdownbutton-from-react-bootstrap

2条答案

按热度按时间

ttcibm8c1#

将navItem='true'添加到下拉按钮标记

赞(0）回复(0）举报 2023-02-27

wfauudbj2#

您可以使用CSS将它们 Package 为以下内容：

.dropdown-toggle {
  width: 100px;
  white-space: normal;
  word-break: break-all;
}

width: 100px：设置一个特定的宽度，以便 Package 工作。
white-space: normal：此线覆盖样式：来自Bootstrap的white-space: nowrap使按钮文本不换行。
word-break: break-all：打破文字，您可以从here了解更多信息

请注意，如果它不工作，通常是因为CSS的特殊性。您的样式可能被Bootstrap覆盖。您可以随时检查您的浏览器的开发工具。

赞(0）回复(0）举报 2023-02-27

我来回答

Bootstrap 如何 Package 太长的标题在下拉按钮从React引导？

2条答案

相关问题

热门标签

最新问答