如何使用 react-bootstrap-table 中断标签

Question

我的 table 是：

<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

尝试将 CSS 样式 overflow-wrap: break-word 添加到您的 skillsFormatter。这 "should" 导致那些技能元素换行。

  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>

如何使用 react-bootstrap-table 中断标签

How can I break on labels using react-bootstrap-table

reactjs

react-bootstrap

react-bootstrap-table