6

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:

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>
Community
  • 1
  • 1
delugeon
  • 63
  • 1
  • 7
  • Please include the relevant HTML and CSS so that we can better see what's happening with your code. – TylerH Jun 23 '14 at 20:46
  • 1
    Unfortunately, CSS lacks the ability to determine this on its own. Instead, adjust the font size and/or line height of your header. 20px for both seems to do it -- that's exactly the line height of the paragraph that follows. – Blazemonger Jun 23 '14 at 21:49
  • I would just use http://rocha.la/jQuery-slimScroll and set `.thumbnail-text` to a static height scroller. – Kaizen Programmer Jun 23 '14 at 22:15

4 Answers4

2

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

MarshallOfSound
  • 2,629
  • 1
  • 20
  • 26
  • Thank you @MarshallOfSound. It looks as though a script is really the only way to go, since a CSS solution cannot be found. The only problem is I do not know whether to accept you or Michael_B's answer. – delugeon Jun 24 '14 at 19:11
  • @delugeon Accept the quickest poster, MarshallOfSound posted an answer before me. – Kaizen Programmer Jun 24 '14 at 19:32
  • `line-height` is not consistent between browsers. – LoMaPh Nov 10 '18 at 06:51
1

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;
}
Kaizen Programmer
  • 3,798
  • 1
  • 14
  • 30
  • This is nice. Thanks @Michael_B. I like the flow of it. – delugeon Jun 24 '14 at 19:17
  • In Chrome `.css("line-height")` was returning `normal` instead of a number. As a result this wasn't working for me. So I added `if (body.css("line-height")=='normal') lineHeight = 18`. – LoMaPh Oct 31 '18 at 02:20
1

You notice the area that holds the information that has been cut is defined with maximum height of 160px like this;

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

change to this;

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

To make sure all captions are the same size, you could adjust caption to this;

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

This will let the area height be defined by the text instead of being cut to fit the area height.

acacia
  • 1,375
  • 1
  • 14
  • 40
  • Thanks for the answer, Acacia. Please indicate *why* this answers the question. Code only questions will be flagged by the SO system. – Maarten Bodewes Jun 23 '14 at 23:18
  • Hi @Acacia, thanks for your answer. The problem is that I still want all the thumbnail boxes to be a uniform height. If I change the height to auto, they will be varying heights according to how much text they pull in. – delugeon Jun 24 '14 at 18:57
  • @delugeon, you can check the update. Make the caption size uniform and let the thumb-nail-text auto height. – acacia Jun 24 '14 at 19:40
0

just add column-width attribute and give width of that div, it will work.

Nauman Sharif
  • 205
  • 2
  • 12
  • 1
    If there are more than one element (like here where there are `h3` and `p` elements) this solution doesn't work (tested in Firefox). – LoMaPh Oct 30 '18 at 05:47