Avoid vertical text / characters

Question

I limited the height of the text area in the thumbnail window in Bootstrap, but in cases where the title consists of two or more lines, it cuts the last line of text vertically in half. See here:

http://www.bootply.com/zBXG6in5R5

Since the text field has two font sizes (more for the title and less 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, but only the part that overflows. Adding text overflow: ellipsis or the like does not stop displaying half a line.

I looked through both of these previous posts, but they don't seem to give an answer that works for my case:

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

• Sentence showing half at the end of a div, overflow: hidden reduces sentence

I mentioned Bootstrap in case there is a solution that anyone has found using their thumbnail class, but this is really a more general question. Is there a way to stop shredded height lines, preferably in CSS?

Thank!

EDIT: for those who don't need a 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 wrote you very good jQuery to calculate the number of lines that can be visible, and then limit it to the number

$(".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");
});

CSS, p :

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

→ http://www.bootply.com/1pZoRkUHOj

, ,

Answer 2

, , , , 160 , :

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

:

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

, , :

.thumbnail .caption {
    padding: 9px;
    color: rgb(51, 51, 51);
    height: 450px;
}

, , .

Answer 3

@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;
}

Answer 4

just add the column width attribute and specify the width of this div, it will work.