Blazorise Select组件长文本显示异常，求自动换行解决方案

问题场景 #

使用Blazorise的Select组件时，选项包含超长文本会导致下拉列表显示异常，需要实现选项文本自动换行。当前代码示例：

<Field ColumnSize="ColumnSize.Is4.OnTablet.Is12.OnMobile.Is12.OnDesktop.Is4.OnWidescreen.Is4.OnFullHD">
<Select TValue="int">
    <SelectItem Value="1">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</SelectItem>
    <SelectItem Value="2">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</SelectItem>
    <SelectItem Value="3">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</SelectItem>
    <SelectItem Value="4">Lorem Ipsum is simply dummy text of the printing and tLorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</SelectItem>
</Select></Field>

显示异常效果：

解决方法 #

通过自定义CSS覆盖Blazorise默认样式，实现文本自动换行：

1. 给Select组件添加自定义类
   修改Select标签，添加Class="wrap-select"：

<Field ColumnSize="ColumnSize.Is4.OnTablet.Is12.OnMobile.Is12.OnDesktop.Is4.OnWidescreen.Is4.OnFullHD">
<Select TValue="int" Class="wrap-select">
    <SelectItem Value="1">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</SelectItem>
    <SelectItem Value="2">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</SelectItem>
    <SelectItem Value="3">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</SelectItem>
    <SelectItem Value="4">Lorem Ipsum is simply dummy text of the printing and tLorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</SelectItem>
</Select></Field>

2. 添加全局CSS规则
   在项目全局样式文件（如wwwroot/css/app.css）中加入以下样式：

.wrap-select .dropdown-item {
    white-space: normal !important;
    max-width: 300px; /* 可根据需求调整最大宽度，或移除让其自适应 */
    word-wrap: break-word;
}

说明 #

Blazorise的下拉选项默认使用white-space: nowrap强制文本不换行，导致超长文本溢出或拉伸下拉框。通过设置white-space: normal允许文本自动换行，word-wrap: break-word确保长单词也能被拆分换行，添加max-width可以限制下拉选项的宽度，避免过度拉伸。

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