高度变化时，文字被切成两半

Question

我的网站上有一个动态更改高度的部分，它包含一大块文字。

溢出设置为隐藏，以便在文本更改高度时隐藏文本。

我遇到的问题是它通常会将文字缩小一半，如下图所示：

有没有办法改变它，以便它仍然可以削减它，但溢出之前的线条会剪断文本，停止文本beign切成两半

HTML

 <div style="overflow: hidden;" class="col-md-5 desktop-row-excerpt">
   <a asp-controller="PressRelease" asp-action="GetPressRelease" asp-route-id=@Model[0].PressReleaseId>
       <img class="img-responsive" src="@Model[0].HeaderImageUri">
       <p>@Model[0].Title</p>
       <div class="press-release-description-underscore"></div>
       <p class="press-release-excerpt press-release-excerpt-1">@Model[0].Summary</p>
    </a>
</div>

它改变高度的原因是因为它设置为与调整大小时另一个元素的高度相匹配，如下面的脚本所示

JS

//excerpt shortening functionality
$(document).ready(function () {

    function resizeExcerpts() {
        //resize containers to match 2 centerones on desktop module
        var matchOneHeight = $('.excerpt-match-1').outerHeight();
        $('.desktop-row-excerpt').outerHeight(matchOneHeight - 10);

        var matchTwoHeight = $('.excerpt-match-2').outerHeight();
        $('.desktop-row-excerpt-2').outerHeight(matchTwoHeight - 10);
    }

    $(window).resize(function () {
        resizeExcerpts();
    });

    resizeExcerpts();

});

Answer 1

涉及最少JS的最简单的解决方案是将高度设置为清除元素的行高的倍数。 line-height将为每行文本定义可用的垂直空间（与实际字体大小无关），并通过将高度设置为该值的倍数，确保文本永远不会被删除，除非一条线。

＆＃13;

＆＃13;

// sets container height to 3 lines
$('div').css('height', parseInt($('div').css('line-height')) * 3);

＆＃13;

div {
  height: 69px; /* starts with a non-clean multiple of line-height */
  line-height: 20px;
  overflow: hidden;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

＆＃13;

＆＃13;

＆＃13;