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

Question

The ellipsis is used by default, but I want it to wrap automatically. thank you very much!!!

I used the material-ui framework for the first time and checked some cases on the Inte.net. I checked the official document https://material-ui.com/components/tables/ but I still have no idea. Maybe my method is wrong.

code show as below：

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

You can try to make it wrap using word-break

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