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中進行字符串操作，將字符串設置為所需的最大字符數。

選擇適合您的用例的選項。