delugeon delugeon - 2 years ago 84
CSS Question

Avoiding text/characters being chopped off vertically

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:

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:

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?


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;


<div class="col-sm-4 col-md-3">
<div class="thumbnail">
<img src="">
<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>

Answer Source

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
  //calculate height consumed by title
  $(this).find("h3").each(function() {
  //calculate height left over for text
  //determine the line height of the text
  //determine the amount of lines that can fit in the height left for the text
  //set the height of the 'p' to be the lines * lineHeight

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

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download