title: Avoiding text/characters being chopped off vertically
body: <p>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:</p>
  
  <p><a href="http://www.bootply.com/zBXG6in5R5" rel="nofollow noreferrer">http://www.bootply.com/zBXG6in5R5</a></p>
  
  <p>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.</p>
  
  <p>I have reviewed both of these previous posts, but they don't seem to provide an answer that works for my case: </p>
  
  <ul>
  <li><p><a href="https://stackoverflow.com/questions/12175326/can-i-completely-hide-lines-of-text-that-are-half-cut-off">Can I completely hide lines of text that are half cut off?</a></p></li>
  <li><p><a href="https://stackoverflow.com/questions/19995616/sentence-showing-half-at-end-of-the-div-overflow-hidden-is-cutting-the-sentenc">Sentence showing half at end of the div, overflow: hidden is cutting the sentence</a></p></li>
  </ul>
  
  <p>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?</p>
  
  <p>Thanks!</p>
  
  <p>EDIT: for those who don't want the bootply link, this is my CSS: </p>
  
  <pre><code>.container {
    margin-top: 20px;
  }
  
  .thumbnail .caption h3 {
    margin-top: 8px;
    margin-bottom: 8px;
  }
  
  .thumbnail-text {
    overflow: hidden;
    height: 160px;
    margin-bottom: 10px;
  }
  </code></pre>
  
  <p>And HTML:</p>
  
  <pre><code>    &lt;div class="col-sm-4 col-md-3"&gt;
        &lt;div class="thumbnail"&gt;
          &lt;img src="http://lorempixel.com/300/160/animals/"&gt;
          &lt;div class="caption"&gt;
            &lt;div style="clear: both;"&gt;&lt;/div&gt;
            &lt;div class="thumbnail-text"&gt;
              &lt;h3&gt;This Title is Two Lines Long&lt;/h3&gt;
              &lt;p&gt;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&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>