CODEWITHSUNDEEP
htmlcsssassstyling
Nhan Nguyen
Nhan Nguyen

Reputation: 405

How to make word stand on the same line

I am having error with long word when it got split up when at middle the line like in the photo right here:

enter image description here

Here is my following code:

  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>
          ),
        },
      };
    });
  }

and here is the following css for code above:

        .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

My closet solution is I tried to change word-break: break-all but my word got split up at the end of the line:

enter image description here

Updated array of contract.reason:

Array(2)
0: "Cannot borrow usage this far in the future."
1: "Contract has a past due balance."

Upvotes: 0

Views: 104

Answers (1)

Felipe Saldanha
Felipe Saldanha

Reputation: 1355

You should review your back-end code, because the two sentences are being joined without a space between them.

That said, try replacing word-break: break-all with overflow-wrap: break-word.

According to MDN:

In contrast to word-break, overflow-wrap will only create a break if an entire word cannot be placed on its own line without overflowing.

Upvotes: 1

Related Questions