如何使用react-bootstrap-table打破标签

Question

我的表是：

<BootstrapTable data={props.workbooks} striped={true} hover={true}>
  <TableHeaderColumn
    dataField="id"
    isKey={true}
    dataAlign="center"
    columnClassName={ props.tdClassFormatter }
    width='50px'>
    ID
  </TableHeaderColumn>
  <TableHeaderColumn dataField="createdAt" width='130px' dataFormat={(cDate) => moment(cDate).format('MMM D, \'YY (h:mm a)')}>Created On</TableHeaderColumn>
  <TableHeaderColumn dataField="status" width='90px' hidden={props.minimized}>Status</TableHeaderColumn>
  <TableHeaderColumn dataField="subject" width='90px' hidden={props.minimized}>Subject</TableHeaderColumn>
  <TableHeaderColumn dataField="results" dataFormat={this.resultsFormatter} dataAlign="center">
    Total /
    <span className="text-info">Attempted</span> /
    <span className="text-success">✓</span> /
    <span className="text-danger">✗</span> /
    <span className="text-muted">Skip</span>
  </TableHeaderColumn>
  <TableHeaderColumn dataField="skills" dataFormat={this.skillsFormatter}>Skills</TableHeaderColumn>
  <TableHeaderColumn dataField="id" dataFormat={this.actionFormatter} dataAlign="center" hidden={props.minimized}></TableHeaderColumn>
</BootstrapTable>

this.skillsFormatter是：

  skillsFormatter(skills) {
    const skillHTML = skills.map((skill, index) => {
      return (
        <span key={index}>
          <Label bsStyle="default">{skill}</Label>&nbsp;
        </span>
      )
    })
    return (
      <div className="text-center">
        {skillHTML}
      </div>
    )
  }

但是我希望标签在新行上打破而不是这样：

我该怎么做？

Answer 1

尝试将CS​​S样式overflow-wrap: break-word添加到skillsFormatter。这个＆＃34;应该＆＃34;使这些技能要素包裹起来。

  skillsFormatter(skills) {
    const skillHTML = skills.map((skill, index) => {
      return (
        <span key={index}>
          <Label bsStyle="default">{skill}</Label>&nbsp;
        </span>
      )
    })
    return (
      <div className="text-center" style={{overflowWrap:'break-word'}}>
        {skillHTML}
      </div>
    )
  }

您可能还需要在此列上设置固定宽度。

<TableHeaderColumn dataField="skills" width="300px" dataFormat={this.skillsFormatter}>Skills</TableHeaderColumn>