javascript - 高度变化时文本被切成两半

Question

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

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

我遇到的问题是它经常将文本切成两半，如下图所示

有什么办法可以改变它，让它仍然剪切它，但是溢出之前的那一行它剪断了停止文本的文本，将文本切成两半

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 将为每行文本定义可用的垂直空间(与实际字体大小无关)，并且通过将高度设置为该值的倍数，您可以确保文本永远不会被剪切of except 在一行之后。

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

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

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