我有一个长单词的错误，当它在中间的时候被分开了，就像这里的照片一样：

下面是我的代码：

  ineligiblePointsTableRows() {
    return this.state[PointsTableType.INELIGIBLE].contracts.map(contract => {
      const startDate = moment(contract.startDate).format("DD MMM YYYY");
      const endDate = moment(contract.endDate).format("DD MMM YYYY");
      return {
        rowKey: contract.usageId,
        rowCells: {
          contractId: this.getContractToolTip(contract.contractId, contract.usageId),
          usageType: this.getUsageTypeJSX(contract.usageType, "disabled"),
          usageYear: <p className="disabled" aria-label={contract.usageYear}>{contract.usageYear}</p>,
          startDate: this.getStartDateJSX(contract.startDate, contract.endDate, "disabled"),
          endDate: <p className="disabled" aria-label={endDate}>{endDate}</p>,
          available: <p className="disabled" aria-label={contract.available.toLocaleString()}>{contract.available.toLocaleString()}</p>,
          applied: (<input
              value={0}
              disabled
              className="applied-pts-input"
          />),
          reason: (
            <div className="ineligible-reason-container">
              <i className="fa fa-exclamation-triangle"></i>
              <p aria-label={contract.reason}>{contract.reason}</p>
            </div>
          ),
        },
      };
    });
  }

下面是上面代码的CSS：

        .ineligible-reason-container
            display: flex
            width: 100%
            flex-direction: row
            align-items: center
            flex-wrap: nowrap
            p
                display: flex
                align-items: center
                word-break: break-word

我的秘密解决方案是我试图更改word-break: break-all，但我的单词在行尾被分开了：

已更新合同数组。原因：

<代码>数组（2）0："；不能在这么远的将来借用用法。"；1："；合同有过期余额。"；

顺晟科技：

您应该检查后端代码，因为这两个句子之间没有空格。

也就是说，尝试将word-break: break-all替换为word-break: break-all。

根据MDN：

相比，word-break仅在整个单词无法放置在自己的行上而不溢出时才会创建中断。