避免垂直切分文本/字符

Question

我在Bootstrap中的缩略图框中限制了文本区域的高度，但是如果标题是两行或更多行，则将文本的最后一行垂直减半。见这里：

http://www.bootply.com/zBXG6in5R5

由于文本框有两个字体大小(标题更大，描述更小，这将是动态的和可变的)，因此设置行高不会有帮助。溢出:隐藏不隐藏完整的文本行，只是溢出的部分。添加文本溢出:省略或喜欢也不会阻止半行显示。

我已经回顾了这两篇文章，但它们似乎没有给出一个适用于我的案例的答案：

• 我能完全隐藏半截的文字行吗？
• 在div结尾显示一半的句子，溢出:隐藏是裁剪句子。

我已经提到过Bootstrap，以防任何人在使用缩略图类时都找到了解决方案，但这确实是一个更普遍的问题。有什么方法可以阻止切线高度的发生，最好是在CSS中？

谢谢!

编辑:对于那些不想要引导链接的人，这是我的CSS：

.container {
  margin-top: 20px;
}

.thumbnail .caption h3 {
  margin-top: 8px;
  margin-bottom: 8px;
}

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

和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

我已经写了一些非常好的jQuery来计算可以看到的行数，然后将其限制在这个数量上。

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

类似@MarshallOf人声

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

演示

CSS：

.thumbnail-text p {
  overflow:hidden;
}

Answer 3

您注意到，保存已切割信息的区域定义为最大高度160 of，如下所示；

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

这将使区域高度由文本定义，而不是被裁剪以适应区域高度。