时间戳

首页 > 解决方案 > 换行 Office UI Fabric DetailsRow 的文本

css - 换行 Office UI Fabric DetailsRow 的文本

问题描述

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

这是我的分组列表

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

关于如何使文本换行的任何想法？在造型方面，我是初学者。

标签： cssreactjsoffice-ui-fabricoffice-ui-fabric-react

解决方案

如果您有特定的列，其文本已知需要超过“1 行”的文本，您可以使用isMultiLine column 上的属性。这是将isMultiLine列设置为 true 以换行文本的示例，这反过来又扩大了相应行的高度：“ DetailsList - Variable Row Heights ”。

推荐阅读