Wrap text of Office UI Fabric DetailsRow

Question

I am trying to get my text to wrap around and display in multiple lines in Office UI Fabric's DetailsRow. At the moment some of my rows that have long text go off the screen, and I would like them to wrap around so the user does not have to scroll to read the entire row.

This is my GroupedList

              <GroupedList
                items={this._items}
                onRenderCell={this._onRenderCell}
                groups={this._groups}
                selectionMode={SelectionMode.none}
                compact={true}
              />

This is my render method for each cell.

 _onRenderCell = (nestingDepth, item, itemIndex) => {
      return (
        <DetailsRow  
          columns={this._columns}
          groupNestingDepth={nestingDepth}
          item={item}
          itemIndex={itemIndex}
          selection={this._selection}
          selectionMode={SelectionMode.none}
          onClick={() => this.insertComment(item.key, item.link)}
        />
      );
    };

Any ideas on how to make the text wrap? I am a beginner when it comes to styling.

score 1 · Accepted Answer · answered Apr 04 '20 at 01:42

If you have specific columns whose text are known to require more than "1 line" of text, you can use the isMultiLine property on the column. This is the example that sets isMultiLine to true for a column to wrap the text, which in turn enlarges the height of the corresponding row: "DetailsList - Variable Row Heights".

Wrap text of Office UI Fabric DetailsRow

1 Answers1