如何从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：打破常规，您可以从here了解更多

请注意，如果它不起作用，通常是因为CSS特殊性。您的样式可能会被Bootstrap覆盖。您始终可以在浏览器的开发人员工具中进行检查。

希望获得帮助！