Question

我在Bootstrap的缩略图框中约束了文本区域的高度，但是在标题是两行或更多行的情况下，它会将文本的最后一行垂直切成两半。见这里：

http://www.bootply.com/zBXG6in5R5

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

我已经回顾了以前的这些帖子，但他们似乎没有提供适合我案例的答案：

我已经提到过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;
}

链接 - ＆gt; http://www.bootply.com/1pZoRkUHOj

我知道这是一个特定于案例的解决方案，但解决方案背后的概念将适用于任何事情

Answer 2

与@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;
}

Answer 3

您注意到保存已切割信息的区域定义为最大高度为160像素，如此;

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

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

Answer 4

只需添加列宽属性并给出该div的宽度，它就可以工作。

避免垂直切断文本/字符

4 个答案: