如何在Polaris Index Table单元格中实现文本换行？

要实现Polaris Index Table中单元格的长文本自动换行，你可以通过以下两种方式解决：

方法1：调整Text组件的渲染标签与样式 #

你当前代码中给Text组件设置了as="span"，span是行内元素，默认不会自动换行。可以移除as="span"（Text默认渲染为p标签，块级元素），或者添加自定义样式强制换行：

<IndexTable.Cell>
  <Text variant="bodyMd" fontWeight="bold" style={{ whiteSpace: 'normal', wordWrap: 'break-word' }}>
    {name}
  </Text>
</IndexTable.Cell>

方法2：直接给IndexTable.Cell添加样式 #

如果不想修改Text组件，也可以直接给IndexTable.Cell设置样式，强制单元格内的文本换行：

<IndexTable.Cell style={{ whiteSpace: 'normal', wordWrap: 'break-word' }}>
  <Text variant="bodyMd" fontWeight="bold" as="span">
    {name}
  </Text>
</IndexTable.Cell>

修改后的完整代码 #

import {IndexTable, Card, useIndexResourceState, Text} from '@shopify/polaris';
import React from 'react';

function SimpleIndexTableExample() {
  const customers = [
    {
      id: '3411',
      url: 'customers/341',
      name: 'Mae Jemison long text here, very very long......',
      location: 'Decatur, USA',
      orders: 20,
      amountSpent: '$2,400',
    },
    {
      id: '2561',
      url: 'customers/256',
      name: 'Ellen Ochoa',
      location: 'Los Angeles, USA',
      orders: 30,
      amountSpent: '$140',
    },
  ];
  const resourceName = {
    singular: 'customer',
    plural: 'customers',
  };

  const {selectedResources, allResourcesSelected, handleSelectionChange} =
    useIndexResourceState(customers);

  const rowMarkup = customers.map(
    ({id, name, location, orders, amountSpent}, index) => (
      <IndexTable.Row
        id={id}
        key={id}
        selected={selectedResources.includes(id)}
        position={index}
      >
        <IndexTable.Cell style={{ whiteSpace: 'normal', wordWrap: 'break-word' }}>
          <Text variant="bodyMd" fontWeight="bold">
            {name}
          </Text>
        </IndexTable.Cell>
        <IndexTable.Cell>{location}</IndexTable.Cell>
        <IndexTable.Cell>{orders}</IndexTable.Cell>
        <IndexTable.Cell>{amountSpent}</IndexTable.Cell>
      </IndexTable.Row>
    ),
  );

  return (
    <Card>
      <IndexTable
        resourceName={resourceName}
        itemCount={customers.length}
        selectedItemsCount={
          allResourcesSelected ? 'All' : selectedResources.length
        }
        onSelectionChange={handleSelectionChange}
        headings={[
          {title: 'Name'},
          {title: 'Location'},
          {title: 'Order count'},
          {title: 'Amount spent'},
        ]}
      >
        {rowMarkup}
      </IndexTable>
    </Card>
  );
}

原理说明 #

Polaris的IndexTable单元格默认设置了white-space: nowrap来保持单行显示，通过设置whiteSpace: 'normal'可恢复自动换行，wordWrap: 'break-word'则确保超长单词也能被拆分换行，适配不同屏幕尺寸。

内容的提问来源于stack exchange，提问作者Delfine Umaku