截断 MudTable 单元格中的文本

Question

如何指示 MudTable 截断单元格中的文本而不是让文本换行到下一行？

这是一个代码示例

<MudTable Items="@data">
    <ColGroup>
        <col style="width: 80%" />
        <col style="width: 20%" />
    </ColGroup>
    <HeaderContent>
        <MudTh>Name</MudTh>
        <MudTh>Description</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd>@context.Name</MudTd>
        <MudTd>@context.Description</MudTd>
    </RowTemplate>
</MudTable>

@code {
    public string Text { get; set; } = "????";
    public string ButtonText { get; set; } = "Click Me";
    public int ButtonClicked { get; set; }

    public class TableStructure
    {
        public string Name { get; set; } = string.Empty;
        public string Description { get; set; } = string.Empty;
    }

    private List<TableStructure> data = new();

    protected override void OnInitialized()
    {
        data.Add(new() { Name = "Name1", Description = "Description 1"});
        data.Add(new() { Name = "Name2", Description = "Description 2"});
        data.Add(new() { Name = "Name3", Description = "Description 3"});
        data.Add(new() { Name = "Name4", Description = "Description 4 - This is a really long description that is the problem"});
    }

}

如何将最终项目的描述从包装文本转换为类似“描述 4 - 这是......”

我发现 css 允许断字，但没有任何支持截断。

有什么想法吗？我可以在项目级别添加每个表都可以继承的内容吗？

这里是游乐场 https://try.mudblazor.com/snippet/mkmSaevAnmAsvCEE

Answer 1

您可以检查描述的长度并显示子字符串。

<RowTemplate>
    <MudTd>@context.Name</MudTd>
    <MudTd>
        @if(context.Description.Length > 5)
        {
            @($"{context.Description.Substring(0, 5)}...")
        }
        else
        {
            @context.Description
        }
    </MudTd>
</RowTemplate>

Answer 2

您可以设置

<MudTd>

元素的样式来实现此目的。

<MudTable Items="@data">
    <ColGroup>
        <col style="width: 80%" />
        <col style="width: 20%" />
    </ColGroup>
    <HeaderContent>
        <MudTh>Name</MudTh>
        <MudTh>Description</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd>@context.Name</MudTd>
        <MudTd Style="max-width: 1px;overflow-wrap: break-word;white-space: nowrap;overflow: hidden;">@context.Description</MudTd>
    </RowTemplate>
</MudTable>

这些是您需要完全忽略文本溢出的 css 样式。

注意： max-width 需要为

>= 0

。

{
    max-width: 1px;
    overflow-wrap: break-word;
    white-space: nowrap;
    overflow: hidden;
}

或者您可以只让单元格可滚动，而不是使用隐藏它

overflow-y: hidden;
// or 
overflow: auto;

演示👉MudBlazor 片段