css 使Material-UI自动完成打断长单词以适应布局

mlmc2os5  于 2023-06-07  发布在  其他
关注(0)|答案(1)|浏览(198)

这是我第一次处理Material-UI自动完成。在我的例子中,我使用它与用户名,这只能有一定的长度,但它可能不适合自动完成视图,由于限制的大小。

正如你在沙箱和图片中看到的,如果单词太长,它们会被切断。
因此,我正在寻找一种方法来扩大下拉菜单的宽度,当它被点击,这取决于选项字符串长度或实现一个断字太长的话。
正如在沙箱中所看到的,我尝试了不同的方法来使文本溢出或将单词分成新的一行,但直到现在都没有成功。
Sandbox-Example
有没有人可以指导我如何解决这个问题?

4szc88ey

4szc88ey1#

通过将componentProps添加到传递到自动完成的列表属性来修复此问题。
这使得带有用户名的下拉菜单比输入字段宽,并保证宽度对应于最大用户名长度或固定长度,如我的代码所示。

<Autocomplete
        id="select_user_history"
        options={users}
        value={selectedUser}
        // --------
        // following block solves it
        componentsProps={{
            paper: {
                sx: {
                    width: 160
                }
            }
        }}
        // --------
        getOptionLabel={e => e.name}
        .....
        )}
    />

相关问题