Text wird halbiert, wenn sich die Höhe ändert

Question

Ich habe einen Abschnitt auf meiner Website, der dynamisch die Höhe ändert und einen Textblock enthält.

Der Überlauf wird auf ausgeblendet gesetzt, um den Text auszublenden, wenn er seine Höhe ändert.

Die Fragen, die ich habe, ist, dass es oft den Text in zwei Hälften schneidet, wie Sie im Bild unten

Gibt es eine Möglichkeit, dies zu ändern, so sehen können, dass es schneidet es nach wie vor, aber die Zeile vor dem Überlauf snips es den Text, den Text beign halbieren

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> 

stoppen

Der Grund ist es Höhe ändert, weil es festgelegt wird, um die Höhe eines anderen Elements auf Resize übereinstimmen, wie Sie durch das Skript unter

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

Die einfachste Lösung, die am wenigsten beinhaltet sehen JS legt die Höhe fest, um Vielfache der Zeilenhöhe Ihres Elements zu bereinigen. line-height definiert den verfügbaren vertikalen Abstand für jede Textzeile (unabhängig von der tatsächlichen Schriftgröße), und indem Sie die Höhe auf ein Vielfaches dieses Werts festlegen, stellen Sie sicher, dass Text nur nach einer Zeile abgeschnitten wird.

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