时间戳

首页 > 解决方案 > 如何使 div 只显示前 50 个字符 css

html - 如何使 div 只显示前 50 个字符 css

问题描述

我试图让我的卡选项条款只显示前 100 个字符，但我遇到了我添加的这 3 行代码对我不起作用的 css 问题：

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

这是我的代码库：

<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>

css 文件：

.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;
}

问题行字太长，只想显示前 50 个字符

在此处输入图像描述

标签： htmlcssstyling

解决方案

var string = $('.str').text();
var str50 = string.substr(0,50) 
$('.str').html(str50+'...'+'<a class="readmore" href="#">readmore</a>');
$('.str').attr('data-text',string);

$('.readmore').click(function(e)
{
    e.preventDefault();
    $(this).parent().html($(this).parent().attr('data-text'))

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='str'>
How To Display 1st 50 characters Of Text by using , html, css, javascript, jquery . and after 50 charecters create link for show the total text
</div>

推荐阅读