Avoiding text/characters being chopped off vertically

Question

I've constrained the height of an area of text within a thumbnail box in Bootstrap, but in cases where the title is two or more lines, it cuts the last line of the text vertically in half. See here:

http://www.bootply.com/zBXG6in5R5

Since the text box has two font sizes (larger for the title and smaller for the description, which will be dynamic and vary in length), setting the line height will not help. Overflow:hidden does not hide full lines of text, just the part that overflows. Adding text-overflow: ellipsis or like does not stop the half-line from showing up, either.

I have reviewed both of these previous posts, but they don't seem to provide an answer that works for my case:

• Can I completely hide lines of text that are half cut off?

• Sentence showing half at end of the div, overflow: hidden is cutting the sentence

I have mentioned Bootstrap in case there is a solution anyone has found in using their thumbnail class, but it's really a more general question. Is there any way to stop chopped line-heights from happening, preferably in CSS?

Thanks!

EDIT: for those who don't want the bootply link, this is my CSS:

.container {
  margin-top: 20px;
}

.thumbnail .caption h3 {
  margin-top: 8px;
  margin-bottom: 8px;
}

.thumbnail-text {
  overflow: hidden;
  height: 160px;
  margin-bottom: 10px;
}

And HTML:

    <div class="col-sm-4 col-md-3">
      <div class="thumbnail">
        <img src="http://lorempixel.com/300/160/animals/">
        <div class="caption">
          <div style="clear: both;"></div>
          <div class="thumbnail-text">
            <h3>This Title is Two Lines Long</h3>
            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore</p>
          </div>
        </div>
      </div>
    </div>

Answer 1

I have written you some very nice jQuery to calculate the number of lines that could be visible and then restrict it to that amount

$(".thumbnail-text").each(function() {
  //start with 0 height
  h=0;
  //calculate height consumed by title
  $(this).find("h3").each(function() {
    h+=$(this).outerHeight();
  });
  //calculate height left over for text
  h=160-h;
  //determine the line height of the text
  lineHeight=parseFloat($(this).find("p").first().css("line-height"));
  //determine the amount of lines that can fit in the height left for the text
  lines=Math.floor(h/lineHeight);
  //set the height of the 'p' to be the lines * lineHeight
  $(this).find("p").first().css("height",(lines*lineHeight)+"px");
});

I also changed your css a bit so now the p element is set to overflow:hidden and has the margin-bottom

.thumbnail-text p {
  overflow: hidden;
  margin-bottom: 10px;
}

Link -> http://www.bootply.com/1pZoRkUHOj

I know it is a very case specific solution but the concept behind the solution will work for anything

Answer 2

Similar approach as @MarshallOfSound

$(function(){
  var captionHeight=150; //160px - 10px bottom margin.
  $(".thumbnail-text").each(function(){

      var h3=$(this).find("h3");
      var p=$(this).find("p");

      var titleHeight=h3.outerHeight();
      var lineHeight=p.css("line-height").replace('px','');
      var pHeight=captionHeight-titleHeight;
      var newHeight=Math.floor(pHeight/lineHeight)*lineHeight;

      p.height(newHeight);
  });
});

DEMO

CSS:

.thumbnail-text p {
  overflow:hidden;
}