My goal is to display only the first 100 characters of the Optional Clause in my card, but I'm running into problems with the CSS. The following 3 lines of code aren't working for me:
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
Below is a snippet of my code:
<div className="LoanReviewCard">
<p className="subHeader-text">BASICS</p>
<p className="header-text">
{currentLoanRequest.loanProposalDetails.purpose}
</p>
...
<p className="review-text">
<span className="bold">Optional Clause:</span>{" "}
{currentLoanRequest.loanProposalDetails.addLoanClause.length > 0 ? (
currentLoanRequest.loanProposalDetails.addLoanClause
) : "None"}
</p>
</div>
This is the relevant part of my CSS file:
.review-text {
font-family: "Poppins", sans-serif;
font-weight: 400;
.bold {
font-family: "Poppins", sans-serif;
font-weight: 700;
}
font-size: 15px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
white-space: initial;
word-break: break-word;
}
The issue I'm facing is that the words are too long and I want to limit it to just the first 50 characters.