So verhindern Sie, dass Mud Blazor MudTable-Spalten so erweitert werden, dass sie in den Text passen

Question

Ich habe eine Tabelle mit 5 Spalten, von denen eine einige sehr lange Benutzer-IDs (ohne Leerzeichen) enthält. Anstatt den Text abzuschneiden, wird die Spalte erweitert, um den gesamten Inhalt aufzunehmen, wodurch die anderen Spalten nach rechts verschoben werden und Bildlaufleisten angezeigt werden.

Ich habe stundenlang recherchiert, um herauszufinden, wie ich die Breite korrigieren und ein Überlaufen verhindern kann. Ich habe versucht, MudTable 元素上的 table-layout 属性设置为 fixed ，并尝试使用 width:20%; 的变体；自动换行：换行；空白：nowrap；溢出：隐藏； text-overflow: ellipsis; 在我能想到的任何内容上，例如 col MudTd usw. hinzuzufügen, aber nichts hat funktioniert, nicht einmal das.

Die Dokumentation scheint den Überlauf überhaupt nicht abzudecken, was frustrierend ist. Auch die Einstellung col 宽度效果很好，直到数据变得太长，并且设置 max-width hilft nicht.

Dies scheint ein Problem zu sein, das in MudTable behoben werden sollte. Kann mir jemand sagen, was ich falsch mache, oder eine Lösung vorschlagen?

Das ist mein Tisch:

<MudTable id="results-table" ServerData="@(new Func<TableState, Task<TableData<HiHi1User>>>(LoadUsers))" RowsPerPage="50" FixedHeader=@_tableFixedHeader FixedFooter=@_tableFixedFooter
         Style="table-layout:fixed" Height=@_tableFixedHeight Hover="true" Striped="true" Breakpoint="Breakpoint.Sm" Loading="@_loading" LoadingProgressColor="Color.Primary">
        <ColGroup>
            <col style="width:20%;" />
            <col style="width:20%;" />
            <col style="width:20%;" />
            <col style="width:20%;" />
            <col style="width:20%;" />
        </ColGroup>
        <HeaderContent>
            <MudTh id="user-id-hdr">User ID</MudTh>
            <MudTh id="group-id-hdr">Group ID</MudTh>
            <MudTh id="current-versions-hdr">Current Version</MudTh>
            <MudTh id="max-versions-hdr">Max Version</MudTh>
            <MudTh id="can-alter-gnf-hdr">Can Alter Night Forwarding Status</MudTh>
        </HeaderContent>
        <RowTemplate>
            <MudTd id="user-id-val" DataLabel=@nameof(context.UserId)>@context.UserId</MudTd>
            <MudTd id="group-id-val" DataLabel=@nameof(context.GroupId)>@context.GroupId</MudTd>
            <MudTd id="current-versions-val" DataLabel=@nameof(context.CurrentVersion)>@context.CurrentVersion</MudTd>
            <MudTd id="max-versions-val" DataLabel=@nameof(context.MaxVersion)>@context.MaxVersion</MudTd>
            <MudTd id="can-alter-gnf-val" DataLabel=@nameof(context.CanAlterNightForwardingStatus)>@context.CanAlterNightForwardingStatus</MudTd>
        </RowTemplate>
        <PagerContent>
            <MudTablePager HorizontalAlignment="HorizontalAlignment.Left" HidePagination="false" />
        </PagerContent>
    </MudTable>

Vielen Dank.

Answer 1

试试这个。overflow-wrap:break-word;max-width:200px; 在您的行上。

由于某种原因，max-width 需要设置为 > 0 值，但您可以在 ColGroup 样式中控制列的宽度。

<RowTemplate>
    <MudTd DataLabel="Nr">@context.Number</MudTd>
    <MudTd DataLabel="Sign">@context.Sign</MudTd>
    <MudTd DataLabel="Name" Style="overflow-wrap:break-word;max-width:10px;">@context.Name</MudTd>
    <MudTd DataLabel="Position">@context.Position</MudTd>
    <MudTd DataLabel="Molar mass" Style="text-align:right">@context.Molar</MudTd>
</RowTemplate>

mudblazor 代码段