有没有办法在 Fluent UI 中使 DetailsList 标题文本换行？

Question

我有一种情况，我想在FluentUI DetailsList中显示数据，其中列名可能很长，而列内容可能很窄。在这种情况下，标头将被截断。 请参阅此代码笔。

有什么方法可以改变这种行为，使标题文本换行多行？

虽然我在 2 年前就发现了这个悬而未决的问题，但我在 Stackoverflow、Github 或官方文档上都找不到该主题的答案。以下是我尝试过的一些方法：

• word-break: break-all;通过headerClassName以下字段注入 CSS 类IColumn
• isMultiLine列上的设置
• DetailsHeader我可以覆盖其渲染的组件本身似乎onRenderDetailsHeader没有提供任何用于自定义文本显示方式的道具

是否有一种方法可以实现所需的行为（换行多行而不是截断长列标题）？

Answer 1

大多数FluentUI Components用途text-overflow: ellipsis。你能做的就是修改那个“规则”。里面DetailsList有onRenderDetailsHeader方法，它允许您更改标题样式。

const onRenderDetailsHeader = (headerProps, defaultRender) => {
    if (!headerProps || !defaultRender) {
        //technically these may be undefined...
        return null;
    }
    return defaultRender({
        ...headerProps,
        styles: {
            root: {
                selectors: {
                    '.ms-DetailsHeader-cell': {
                        whiteSpace: 'normal',
                        textOverflow: 'clip',
                        lineHeight: 'normal',
                    },
                    '.ms-DetailsHeader-cellTitle': {
                        height: '100%',
                        alignItems: 'center',
                    },
                },
            },
        },
    })
}

<DetailsList
  ...
  onRenderDetailsHeader={onRenderDetailsHeader}
/>

Codepen工作解决方案

笔记：

使用minWidth,maxWidth里面的 propsthis._columns来获得预期的行为。