如何解决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 种 -
-
使用 css 将文本换行到另一行。
-
如果文本超出最大宽度,则在 css 中使用“text-overflow: ellipsis”添加“...”。
-
如果不想走css路线,可以在js中进行字符串操作,将字符串设置为所需的最大字符数。
选择适合您的用例的选项。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。