Office UI Fabric DetailsRow 的换行文本

Question

我正在尝试让我的文本环绕并在 Office UI Fabric 的 DetailsRow 中以多行显示。目前我的一些长文本行离开了屏幕，我希望它们环绕，这样用户就不必滚动来阅读整行。

这是我的 GroupedList

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

这是我对每个单元格的渲染方法。

 _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)}
        />
      );
    };

关于如何使文本换行有什么想法吗？在造型方面我是初学者。

Answer 1

如果已知特定列的文本需要超过“1 行”的文本，则可以使用 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".

Office UI Fabric DetailsRow 的换行文本

Wrap text of Office UI Fabric DetailsRow

css

reactjs

office-ui-fabric

office-ui-fabric-react