material-ui/Table 如何让一列文字自动换行？默认使用省略号

Question

默认情况下使用省略号，但我希望它自动换行。 非常感谢你！！！

第一次使用material-ui框架，上网查了一些案例。我查看了官方文档https://material-ui.com/components/tables/，但我仍然不知道。可能是我的方法不对。

代码如下：

import {
  Table,
  TableBody,
  TableHeader,
  TableHeaderColumn,
  TableRow,
  TableRowColumn,
} from 'material-ui/Table';

getTable() {
    let rows = [];
    for(var i=0; i<this.state.tasksOnShow.length; i++){
      let row = this.state.tasksOnShow[i];
      rows.push(
        <TableRow key={"row"+row.planId}>
          <TableRowColumn>{row.level}</TableRowColumn>
          <TableRowColumn>{row.taskName}</TableRowColumn>
          <TableRowColumn>{row.owner}</TableRowColumn>
          <TableRowColumn>{row.taskType}</TableRowColumn>
          <TableRowColumn>{row.taskGroup}</TableRowColumn>
          <TableRowColumn>{row.projectTeam}</TableRowColumn>
          <TableRowColumn>{row.status}</TableRowColumn>
        </TableRow>
      );
    }
    let styles = {
      tdStyle1:{
        width: "5%"
      },
      tdStyle2:{
        width: "30%"
      },
      tdStyle3:{
        width: "15%"
      },
      tdStyle4:{
        width: "10%"
      },
      tdStyle5:{
        width: "12%"
      },
      tdStyle6:{
        width: "12%"
      },
      tdStyle7:{
          width: "16%"
      }
    }
    return (
      <div>
        <Table
          height={450}
          fixedHeader={false}
          fixedFooter={false}
          selectable={true}
          multiSelectable={true}
          onRowSelection={(sels)=>this.onRowSelection(sels)}
        >
          <TableHeader
            displaySelectAll={true}
            adjustForCheckbox={true}
            enableSelectAll={true}

          >
            <TableRow>
              <TableHeaderColumn style={styles.tdStyle1} tooltip="level">level</TableHeaderColumn>
              <TableHeaderColumn style={styles.tdStyle2} tooltip="taskName">taskName</TableHeaderColumn>
              <TableHeaderColumn style={styles.tdStyle3} tooltip="owner">owner</TableHeaderColumn>
              <TableHeaderColumn style={styles.tdStyle4} tooltip="taskType">taskType</TableHeaderColumn>
              <TableHeaderColumn style={styles.tdStyle5} tooltip="taskGroup">taskGroup</TableHeaderColumn>
              <TableHeaderColumn style={styles.tdStyle6} tooltip="projectTeam">projectTeam</TableHeaderColumn>
              <TableHeaderColumn style={styles.tdStyle7} tooltip="status">status</TableHeaderColumn>
            </TableRow>
          </TableHeader>
          <TableBody
            displayRowCheckbox={true}
            deselectOnClickaway={false}
            showRowHover={true}
            stripedRows={true}
          >
          {rows}

          </TableBody>
        </Table>
      </div>
    );

Answer 1

您可以尝试使用word-break 进行换行

tdStyle2:{
  width: "30%",
  wordBreak: "break-all"
},