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

问题描述

我正在使用 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 的标题中，但问题是下拉列表的大小或宽度随着我收到的地址的长度而不断增加。

如何解决。请帮忙。

解决方法

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

,

我能想到的方法有 3 种 -

1. 使用 css 将文本换行到另一行。

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

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

选择适合您的用例的选项。