Reactjs 是否可以在office UI结构详细信息列表中换行长标题名称?

Reactjs 是否可以在office UI结构详细信息列表中换行长标题名称?,reactjs,office-ui-fabric,Reactjs,Office Ui Fabric,在帖子中遵循以下步骤: . 我能够设计标题的样式,但是很少有标题非常长,并且会被截断 我试着在样式中使用wordWrap:“break word”,但它没有改变任何东西: private renderCustomHeaderTooltip(tooltipHostProps: ITooltipHostProps): JSX.Element { return ( <span style={{ display: 'flex',

在帖子中遵循以下步骤: . 我能够设计标题的样式,但是很少有标题非常长,并且会被截断

我试着在样式中使用wordWrap:“break word”,但它没有改变任何东西:

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

是否可以在Office UI结构详细信息列表中换行并显示完整标题?

可以通过指定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}
  />
结果


您是否尝试过flexWrap:wrap;?另外,您能否在codesandbox.io上创建一个小的快速演示?这将使帮助变得容易。我尝试过flexWrap:wrap,但效果不太好。请创建一个演示并共享链接,我会研究它。它的office fabric ui组件在react中,我已经发布了上面详细列表的链接。还将创建演示