Question

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

是否有任何方法可以更改此行为，以使标题文本换行？

两年前我发现this unanswered question时，找不到关于Stackoverflow，Github或官方文档的答案。这是我尝试过的一些方法：

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

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

Answer 1

FluentUI Components中的大多数使用text-overflow: ellipsis。您可以做的就是修改该“规则”。在DetailsList内部，您可以使用onRenderDetailsHeader方法来更改标题样式。

<DetailsList
  ...
  onRenderDetailsHeader: (headerProps, defaultRender) => {
    return defaultRender({
      ...headerProps
      styles: {
        root: {
          selectors: {
            '.ms-DetailsHeader-cell': {
               whiteSpace: 'normal',
               textOverflow: 'clip',
               lineHeight: 'normal',
             },
            '.ms-DetailsHeader-cellTitle': {
               height: '100%',
               alignItems: 'center',
             },
           },
         },
        },
      })
    }
/>

Codepen working solution

注意：

在minWidth内玩maxWidth，this._columns道具来获得预期的行为。

有没有办法在Fluent UI中进行DetailsList标头文本换行？

1 个答案: