4

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

有没有办法改变这种行为，比如标题文本覆盖多行？

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

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

甚至有没有办法实现所需的行为（包装多行而不是截断长列标题）？

4

1 回答 1

4

大多数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以获得预期的行为。

于 2020-11-09T21:27:15.157 回答