如何使 div 只显示前 50 个字符 css答案

【问题标题】：How to make div only showing first 50 characters css如何使 div 只显示前 50 个字符 css
【发布时间】：2021-10-08 10:23:21
【问题描述】：

我试图让我的卡片选项条款只显示前 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 个字符

【问题讨论】：

为什么必须是 50 个字符？将它设置为 4 行 之类的不是更好吗？
您还需要页面来实际包含全文吗？如果不是，我建议在显示之前操纵文本长度，而不是使用 css 来隐藏它
"css file :" - 那将是无效的 CSS - 除非你真的想说这是 SASS 或 LESS 或类似的东西？
@CBroe css 文件我的意思是像 styles.scss 我的坏人
@HaoWu 如何让它像只有 4 行？

标签： html css styling

【解决方案1】：

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>

【讨论】：

你能用 react 编辑它吗？