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

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

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

达达斯
下拉链接
下拉链接
fwf21
下拉链接
下拉链接

---

编辑：添加屏幕截图

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

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

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

• 宽度：100px

  ：设置一个特定的宽度，以便包装工作

• 空白：正常

  ：此行覆盖样式：

  空白：nowrap

  来自引导，使您的按钮文本不包装

• 分词：全部分词

  ：分词，你可以从中学到更多

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

---

希望这有帮助

你能提供一个有效的例子吗？这应该很容易通过via解决CSS@konekoya我用更多的细节和截图编辑了这个问题。你能看一下吗？谢谢你的更新。我已经发布了我的答案，请查看！除此错误外，未进行任何更改：警告：React无法识别DOM元素上的

navItem

prop。如果您有意将其作为自定义属性显示在DOM中，请将其拼写为小写

navitem

。如果意外地从父组件传递了它，请将其从DOM元素中删除。