如何让MudTable单元格文本截断而非自动换行？

一、单个单元格快速实现 #

直接给目标<MudTd>添加文本截断的内联样式，核心依赖CSS的三个属性：white-space: nowrap（禁止文本换行）、overflow: hidden（隐藏超出单元格的内容）、text-overflow: ellipsis（超出部分显示省略号）。

修改后的代码示例：

<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="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
            @context.Description
        </MudTd>
    </RowTemplate>
</MudTable>

@code {
    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"});
    }
}

二、项目级全局配置（所有表格自动继承） #

如果希望项目中所有MudTable的单元格都默认启用文本截断，无需逐个修改，可通过全局CSS实现：

1. 打开项目的全局样式文件（通常是wwwroot/css/app.css或wwwroot/css/site.css）
2. 添加以下样式规则：

/* 全局设置所有MudTable单元格的文本截断 */
.mud-table-cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

所有MudTd默认带有mud-table-cell类，添加后会自动应用截断效果。

补充说明 #

• 若需要多行文本截断，可使用-webkit-line-clamp属性（适配webkit内核浏览器），搭配相关属性：

  .mud-table-cell {
      display: -webkit-box;
      -webkit-line-clamp: 2; /* 设置显示2行后截断 */
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
  }
  

• 确保单元格所在列设置了固定宽度（如示例中的col style="width: 20%"），否则截断效果可能无法正常触发。

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