Twitter Bootstrap - 为缩略图标题提供最少行数答案

【问题标题】：Twitter Bootstrap - Giving thumbnail caption a minimum number of linesTwitter Bootstrap - 为缩略图标题提供最少行数
【发布时间】：2013-09-12 04:45:34
【问题描述】：

我在 Bootstrap 中有一个显示 4 列缩略图的轮播。 Here's 有问题的轮播。如果您移至第三页，您可以看到容器的高度增加以容纳缩略图标题的内容。我一直在尝试很多事情，例如设置底部边距、最小高度等，以使“查看详细信息”按钮在整个轮播中的位置保持不变。

我的问题是解决这个问题的最佳方法是什么？我正在考虑以某种方式使缩略图标题高度至少为 4 行左右，但我尝试过（可能是错误的方式）无济于事。

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

当我添加时

.caption h4 {
    min-height: 2.2em; /* 2 lines as line-height is 1.1 */
}

我在同一级别获得所有“查看详细信息”。但是，这显然不能解决字幕更高的问题。它仅在实际上没有更高的标题时才有效。（但没关系，如果你确定没有什么会比你的倍数更高。）

所以，我改为应用这一点 CSS 来从另一侧设置限制。

.caption h4 {
    max-height: 4.4em;  /* 4 lines as line-height is 1.1 */
    height: 4.4em;      /* making it a multiple allows usage of overflow */
    overflow: hidden;   /* without cutting a line in the middle */
}

如果你想动态地设置一个最大高度等于最高字幕的高度，那么你将不得不使用一点点JS：

(function(d) {
    var captions = d.querySelectorAll('.caption h4'),
        height = 0;

    for(var i = 0; i < captions.length; i++) {
        height = Math.max(height, captions[i].offsetHeight); // or clientHeight depends on you box model
    }

    var style = d.createElement('style');
    style.type = 'text/css';
    style.innerHTML = '.caption h4 { max-height: '+ height +'px; height: '+ height +'px; }'; // they don't need overflow as none of them can overflow;
    d.getElementsByTagName('head')[0].appendChild(style);

})(document);

您将此脚本添加到正文的末尾，以便 DOM 已经加载（或以某种方式在加载时触发它）。

重要提示：由于querySelectorAll，旧版浏览器不支持此sn-p。

当我在您的网站上运行它时，这就是诀窍。

【讨论】：