避免垂直切断文本/字符

Question

我已经限制了Bootstrap中缩略图框内文本区域的高度,但是在标题是两行或更多行的情况下,它会将文本的最后一行垂直切成两半.看这里:

http://www.bootply.com/zBXG6in5R5

由于文本框有两种字体大小(标题较大,描述较小,动态且长度不同),设置行高无济于事.溢出:隐藏不会隐藏整行文本,只会溢出溢出的部分.添加文本溢出:省略号或类似不会阻止半行显示.

我已经回顾了以前的这些帖子,但它们似乎没有提供适用于我的案例的答案:

• 我可以完全隐藏半截断的文本行吗？

• 句子在div的末尾显示一半,溢出:隐藏正在削减句子

我已经提到过Bootstrap,以防任何人在使用他们的缩略图类时找到解决方案,但这确实是一个更普遍的问题.有没有办法阻止切线高度发生,最好是在CSS？

谢谢!

编辑:对于那些不想要bootply链接的人,这是我的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元素设置为overflow:hidden并且有margin-bottom

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

链接 -> http://www.bootply.com/1pZoRkUHOj

我知道这是一个非常具体的解决方案，但该解决方案背后的概念适用于任何情况