高さが変わるとテキストが半分になる

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は、（実際のフォントサイズとは無関係に）テキストの各行に対して利用可能な垂直スペースを定義し、その高さをその値の倍数に設定することで、

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