MudSelect选中项字符串被截断问题求助

问题现象 #

使用MudBlazor的MudSelect组件时，下拉菜单中的长字符串能完整展示，但选中后输入框内的字符串会被截断。尝试通过.mud-select-input类设置宽度未解决问题。

原代码 #

<MudDialog DisableSidePadding="true">
    <DialogContent>
         <MudContainer> 
            <MudSelect T="string" label="String to show" Placeholder="Please Select" Variant="Variant.Outlined" Class="pb-4 select"
                AnchorOrigin="Origin.BottomLeft" TransformOrigin="Origin.TopLeft" Adornment="Adornment.End">
                <MudSelectItem T="string" Value="@("This Is A Long String To Show")"/>
                <MudSelectItem T="string" Value="@("This Is Another Long String To Show")"/>
            </MudSelect>
        </MudContainer>
    </DialogContent>
    <DialogActions>
    </DialogActions>
</MudDialog>

<style>
.mud-select-input
{
    width:400px
    max-width:500px
}
</style>

问题根源 #

1. CSS语法错误：原样式中width:400px和max-width:500px末尾未加分号，导致这两个样式完全不生效，宽度设置等于没加。
2. 默认文本截断规则：MudSelect的选中文本容器（.mud-select-text）默认带有text-overflow: ellipsis和white-space: nowrap样式，超出宽度的文本会被自动截断并显示省略号。

两种解决方案 #

方案一：修正CSS并取消文本截断（允许换行）

先修复语法错误，再修改文本容器的样式，让长文本可以换行完整显示：

<MudDialog DisableSidePadding="true">
    <DialogContent>
         <MudContainer> 
            <MudSelect T="string" label="String to show" Placeholder="Please Select" Variant="Variant.Outlined" Class="pb-4 select"
                AnchorOrigin="Origin.BottomLeft" TransformOrigin="Origin.TopLeft" Adornment="Adornment.End">
                <MudSelectItem T="string" Value="@("This Is A Long String To Show")"/>
                <MudSelectItem T="string" Value="@("This Is Another Long String To Show")"/>
            </MudSelect>
        </MudContainer>
    </DialogContent>
    <DialogActions>
    </DialogActions>
</MudDialog>

<style>
.mud-select-input {
    width: 400px;
    max-width: 500px;
}

.mud-select-text {
    white-space: normal;
    text-overflow: unset;
}
</style>

方案二：直接给MudSelect设置足够宽度（不换行）

如果希望文本在一行显示，直接给MudSelect组件设置宽度，确保能容纳最长的选项文本：

<MudDialog DisableSidePadding="true">
    <DialogContent>
         <MudContainer> 
            <MudSelect T="string" label="String to show" Placeholder="Please Select" Variant="Variant.Outlined" 
                       Class="pb-4 select" Style="width: 450px;"
                       AnchorOrigin="Origin.BottomLeft" TransformOrigin="Origin.TopLeft" Adornment="Adornment.End">
                <MudSelectItem T="string" Value="@("This Is A Long String To Show")"/>
                <MudSelectItem T="string" Value="@("This Is Another Long String To Show")"/>
            </MudSelect>
        </MudContainer>
    </DialogContent>
    <DialogActions>
    </DialogActions>
</MudDialog>

内容的提问来源于stack exchange，提问作者Nicolas Roy