Div显示文本的上半部分

Question

我正在研究MVC 5中的一个项目，我有一个页面，我必须显示有关项目的描述，描述有时可能很长，所以我必须将其限制为最初的500个字符并放入更多按钮，read more按钮显示完整描述。

我正在使用Readmore.js来实现这一目标。它适用于我，但有一个小问题（CSS可能）。当分辨率在320和768之间时出现问题。最后一行显示为半发短信。见下图。

描述文本来自数据库，并且段落标记中包含一个或多个段落。

div的高度为 195px

标记

<div class="float-left">
     <h1 class="contentTile">
           Description
     </h1>
     <div class="appDescription">

            @Html.Raw(Model.Description)

      </div>
      <br />
      <div class="buttonsContainer">
          <a class="articleBtn float-right" href="javascript:void(0);" style="display:none">Read More</a>
      </div>

</div>

脚本

var totalChars = 0;
var parg = $('.appDescription').find('p');
if (parg.length) {
    $('.appDescription').find('p').each(function (index) {
        totalChars += $(this).text().length;
    });
} else {
    totalChars = $('.appDescription').text().length;
}
 if (totalChars >= 500) {
    $('.appDescription').readmore({
        moreLink: '<a class="articleBtn float-right" id="readmoreBtn" style="margin-top:10px;margin-bottom:15px" href="javascript:void(0);" >Read More</a>',
        lessLink: '<a class="articleBtn float-right" id="showlessBtn"  href="javascript:void(0);">Show Less</a>',
        embedCSS: true,
        collapsedHeight: 195,
        blockCSS: 'width:auto;',
        afterToggle: function () {
            $('#showlessBtn').css({
                'margin-top': '10px',
                'margin-bottom': '15px'
            });
        }
    });
}