React-Bootstrap 下拉按钮宽度随标题道具值长度而增加

Question

我正在使用 React Bootstrap 下拉菜单。这是代码

<DropdownButton
            title={userFormattedAdress === undefined ? title : (userFormattedAdress)}
            variant="outline"
            drop={"down"}
          >

            <Dropdown.Item onClick={getUserCurrentLocation} >
              Use Current Location
            </Dropdown.Item>
            <Dropdown.Divider />

            <Dropdown.Item onClick={openMapModal} >
              Change Current Location
            </Dropdown.Item>

</DropdownButton>

我所做的基本上是选择当前位置并更改位置，将地址信息保存在 DropdownButton 的标题中，但问题是下拉菜单的大小或宽度随着我收到的地址的长度而不断增加。

如何解决。请帮忙。

Answer 1

您可以将固定/最大宽度设置为.dropdown-item，但显然它会截断文本。您可以将 y-scroll 添加到父级，但这看起来很难看。因此，要么使用宽下拉（将下拉按钮设置为输入而不是按钮 - 使用一些默认值），要么使用“...”截断文本，并且可能在悬停时添加一些带有全文的弹出窗口。

Answer 2

我能想到的方法有 3 种 -

1. 使用 css 将文本换行。

2. 如果文本超出最大宽度，请在 css 中使用“text-overflow: ellipsis”添加“...”。

3. 如果你不想走css路线，你可以在js中进行字符串操作，将字符串设置为所需的最大字符数。

选择适合您用例的选项。