html - Avoiding text/characters being chopped off vertically -

html - Avoiding text/characters being chopped off vertically -

i've constrained height of area of text within thumbnail box in bootstrap, in cases title 2 or more lines, cuts lastly line of text vertically in half. see here:

http://www.bootply.com/zbxg6in5r5

since text box has 2 font sizes (larger title , smaller description, dynamic , vary in length), setting line height not help. overflow:hidden not hide total lines of text, part overflows. adding text-overflow: ellipsis or not stop half-line showing up, either.

i have reviewed both of these previous posts, don't seem provide reply works case:

can hide lines of text half cutting off?

sentence showing half @ end of div, overflow: hidden cutting sentence

i have mentioned bootstrap in case there solution has found in using thumbnail class, it's more general question. there way stop chopped line-heights happening, preferably in css?

thanks!

edit: don't want bootply link, 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 2 lines long</h3> <p>sed ut perspiciatis unde omnis iste natus error sit down 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 down 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 down amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore</p> </div> </div> </div> </div>

i have written nice jquery calculate number of lines visible , restrict amount

$(".thumbnail-text").each(function() { //start 0 height h=0; //calculate height consumed title $(this).find("h3").each(function() { h+=$(this).outerheight(); }); //calculate height left on text h=160-h; //determine line height of text lineheight=parsefloat($(this).find("p").first().css("line-height")); //determine amount of lines can fit in height left text lines=math.floor(h/lineheight); //set height of 'p' lines * lineheight $(this).find("p").first().css("height",(lines*lineheight)+"px"); });

i changed css bit p element set overflow:hidden , has margin-bottom

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

link -> http://www.bootply.com/1pzorkuhoj

i know case specific solution concept behind solution work anything

html twitter-bootstrap-3 css