Blazorise Select 組件列表長文本問題

Question

我是Blazorise的初學者，我使用了Select 組件，所以當我在 select 列表中使用長文本時，select 列表未正確顯示，請查看附件圖像。 任何解決方案來包裝長文本 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>

Answer 1

據我所知，瀏覽器會忽略 styles 的<option>標簽，所以 CSS 像下面這樣不起作用。

option {  
    max-width: 100%;
    overflow: hidden;
    word-wrap: normal !important;
    white-space: normal; 
}

作為一種解決方法，我建議改用Dropdown組件。 這是一個例子：

<Field ColumnSize="ColumnSize.Is4.OnTablet.Is12.OnMobile.Is12.OnDesktop.Is4.OnWidescreen.Is4.OnFullHD">
    <Dropdown>
        <DropdownToggle Color="Color.Light" Width="Width.Is100">
            @(_selectedValue.HasValue ? _selectedValue : "Select item")
        </DropdownToggle>
        <DropdownMenu Style="max-width: 100%;">
            <DropdownItem Value="1" Class="text-truncate" Clicked="() => OnItemClicked(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.
            </DropdownItem>

            <DropdownDivider />

            <DropdownItem Value="2" Class="text-truncate" Clicked="() => OnItemClicked(2)">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            </DropdownItem>

            <DropdownDivider />

            <DropdownItem Value="3" Class="text-truncate" Clicked="() => OnItemClicked(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.
            </DropdownItem>

            <DropdownDivider />

            <DropdownItem Value="4" Class="text-truncate" Clicked="() => OnItemClicked(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.
            </DropdownItem>
        </DropdownMenu>
    </Dropdown>
</Field>

@code {
    private int? _selectedValue;

    private void OnItemClicked(int value)
    {
        _selectedValue = value;
    }
}

結果：