如何用CSS实现div仅显示前50个字符，现有溢出隐藏代码不生效怎么解决

问题原因 #

你写的CSS属性存在覆盖冲突，white-space: nowrap 被后续的white-space: initial覆盖失效，同时没有给容器设置明确的宽度限制，溢出隐藏的逻辑无法触发，所以没有达到截断效果。

实现方案 #

方案1：CSS实现溢出省略（适合按显示行数截断） #

如果需要按视觉展示行数截断，不需要严格限制字符数，直接修改CSS即可：

• 单行截断CSS：

.review-text {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-size: 15px;
    width: 100%; /* 可根据卡片实际宽度调整为固定值 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    .bold {
        font-family: "Poppins", sans-serif;
        font-weight: 700;
    }
}

• 多行截断CSS（比如限制显示2行）：

.review-text {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-size: 15px;
    width: 100%; /* 可根据卡片实际宽度调整为固定值 */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 要显示的行数，可自定义 */
    -webkit-box-orient: vertical;
    word-break: break-word;
    .bold {
        font-family: "Poppins", sans-serif;
        font-weight: 700;
    }
}

方案2：JS字符串截断（适合严格控制50个字符） #

如果需要精准限制为前50个字符，直接修改JSX渲染逻辑即可，还可以额外加title属性实现鼠标悬浮展示完整内容：

<p 
  className="review-text" 
  title={currentLoanRequest.loanProposalDetails.addLoanClause || "None"}
>
  <span className="bold">Optional Clause:</span>{" "}
  {currentLoanRequest.loanProposalDetails.addLoanClause.length > 0 ? (
    currentLoanRequest.loanProposalDetails.addLoanClause.length > 50 
      ? `${currentLoanRequest.loanProposalDetails.addLoanClause.slice(0, 50)}...`
      : currentLoanRequest.loanProposalDetails.addLoanClause
  ) : "None"}
</p>

这个方案不需要调整原有CSS，适配性更强。

内容的提问来源于stack exchange，提问作者Nhan Nguyen