有没有办法在 Fluent UI 中制作 DetailsList header 文本换行？

Question

我想在 FluentUI DetailsList 中显示数据，其中列名可能很长，而列内容可能很窄。在这种情况下，header 将被截断。 See this codepen.

有什么方法可以改变这种行为，让 header 文本换行吗？

虽然我在 2 年前找到了 this unanswered question，但我在 Whosebug、Github 或官方文档上都找不到关于该主题的答案。 以下是我尝试过的一些方法：

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

有没有办法实现所需的行为（换行而不是截断长列 headers）？

Answer 1

大多数 FluentUI Components 使用 text-overflow: ellipsis。您可以做的是修改该“规则”。在 DetailsList 中，您有 onRenderDetailsHeader 方法，它允许您更改 header 样式。

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 working solution

注：

在 this._columns 中使用 minWidth、maxWidth 道具以获得预期的行为。