是否有一种方法使DetailsList标题文本包装在Fluent UI中？

Question

在这种情况下，我希望在FluentUI DetailsList中显示数据，在这种情况下，列名可能很长，而列内容可能非常狭窄。在这种情况下，头将被截断。看这段代码。

是否有任何方法可以更改此行为，例如头文本将覆盖多行？

虽然我在两年前找到了这个未回答的问题，但无论是在Stackoverflow、Github还是官方文档上，我都找不到关于这个主题的答案。以下是我尝试过的一些方法：

• 通过word-break: break-all;的headerClassName字段注入CSS类
• 在列上设置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道具在this._columns里面，以获得预期的行为。