如何实现MudDataGrid单元格内容自动换行以适配页面窗口？

可以通过MudDataGrid自带配置或自定义CSS两种方式实现单元格文字自动换行，以下是具体方案：

1. 使用组件自带的WrapText属性 #

MudDataGrid的列组件（PropertyColumn、TemplateColumn等）内置WrapText属性，开启后会自动处理单元格内文字换行，无需额外CSS。

示例代码：

<MudDataGrid Items="@yourDataList" AutoGenerateColumns="false">
    <Columns>
        <PropertyColumn Property="x => x.Attribute1" Title="属性1" WrapText="true" />
        <PropertyColumn Property="x => x.Attribute2" Title="属性2" WrapText="true" />
        <!-- 依次为所有需要换行的列添加WrapText="true" -->
        <PropertyColumn Property="x => x.Attribute10" Title="属性10" WrapText="true" />
    </Columns>
</MudDataGrid>

2. 自定义CSS实现更灵活的换行控制 #

如果自带属性满足不了需求（比如需要强制拆分无空格的长字符串），可以通过自定义CSS样式实现：

方式一：全局给表格所有单元格设置换行 #

给MudDataGrid添加自定义类名，然后编写CSS：

<MudDataGrid Items="@yourDataList" Class="wrap-all-cells">
    <!-- 列配置 -->
</MudDataGrid>

.wrap-all-cells .mud-table-cell {
    /* 保留空格换行，同时允许长单词拆分 */
    white-space: pre-wrap;
    word-break: break-all;
    /* 可选：限制单元格最大宽度，避免列过宽 */
    max-width: 250px;
}

方式二：针对特定列设置换行 #

给目标列添加自定义类名，单独控制：

<MudDataGrid Items="@yourDataList">
    <Columns>
        <PropertyColumn Property="x => x.LongTextAttribute" Title="长文本属性" Class="wrap-cell" />
        <!-- 其他列 -->
    </Columns>
</MudDataGrid>

.wrap-cell {
    white-space: pre-wrap;
    word-break: break-word;
}

注意事项 #

• 如果单元格内容是无空格的连续字符串（比如长URL或英文单词），需要使用word-break: break-all强制拆分换行；
• 结合max-width可以限制列的宽度，确保表格整体适配窗口，避免横向滚动。

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