是否可以在 office UI fabric 详细列表中换行长 header 名称？

Question

已执行 post 中的步骤：。我能够设置 header 的样式，但很少有 header 非常冗长并且被截断了。

我尝试使用 wordWrap: 'break-word' 风格，但它没有改变任何东西：

private renderCustomHeaderTooltip(tooltipHostProps: ITooltipHostProps): JSX.Element {
    return (
      <span
        style={{
          display: 'flex',
          fontWeight: 'bold',
          wordWrap: 'break-word'
        }}
      >
        {tooltipHostProps.children}
      </span>
    );
  }

是否可以在 Office-UI-fabric 详细列表中包装并显示完整的 header？

Answer 1

可以通过指定 IColumn.minWidth 和 IColumn.maxWidth 属性来调整列宽，例如：

const columns = 
[
    {
      key: "thumbnail",
      name: "too long column name goes here... too long column name goes here... too long column name goes here... too long column name goes here... too long column name goes here...",
      fieldName: "thumbnail",
      minWidth: 1220,
      maxWidth: 1440,
    },
    ...
];

<DetailsList
    items={items}
    setKey="set"
    columns={columns}
    onRenderDetailsHeader={this.renderDetailsHeader}
  />

结果

是否可以在 office UI fabric 详细列表中换行长 header 名称？

Is it possible to wrap lines of long header name in office UI fabric Detail List?

reactjs

office-ui-fabric