Kieranmv95 Kieranmv95 - 1 year ago 49
CSS Question

text being cut in half when height changes

I have a section on my website which changes height dynamically and it contains a chunk of text.

The overflow is set to hidden to hide the text when it changes its height.

The issues I am having is that it often cuts the text in half like you can see in the image below

enter image description here

Is there any way to change this so that it still cuts it but the line before the overflow it snips the text stopping the text beign cut in half


<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">
<div class="press-release-description-underscore"></div>
<p class="press-release-excerpt press-release-excerpt-1">@Model[0].Summary</p>

The reason it changes height is because it is set to match the height of another element on resize as you can see by the script below


//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 () {



Answer Source

The easiest solution that involves the least JS is to set the height to clean multiples of the line-height of your element. line-height will define the available vertical space for each line of text (independent of the actual font size), and by setting the height to multiples of that value, you're assuring that text is never cut of except after a line.

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