如何在react-bootstrap的DropdownButton中包装太长的标题？

Question

我有一个下拉按钮，但是它的（动态改变的）标题可能太长而不适合。 因此，我想知道是否有办法自动将太长的标题包装到第二行？

  <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>

编辑：添加截图

Answer 1

将navItem ='true'添加到dropdownBotton标记

Answer 2

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

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

• width: 100px ：设置一个特定的宽度，所以包装工作。
• white-space: normal ：这一行覆盖样式： white-space: nowrap来自Bootstrap，它使你的按钮文本不包装。
• word-break: break-all ：打破话语，你可以从这里了解更多

请注意，如果它不起作用，通常是因为CSS特异性。 你的样式可能被Bootstrap覆盖了。 您始终可以在浏览器的开发人员工具中查看此信息。

希望这有帮助！