javascript - block 保持相同的高度，但文本得到省略号

Question

抱歉标题模糊。

我试图有一行 block ，每个 block 包含一个图像、一个 H2 标题、一个描述和一个底部链接。

每个 block 应该保持相同的高度，但显然标题可以在行中变化，这意味着描述必须在较小的高度处省略。

下面发生的事情是链接没有被解释，即使我已经声明了它。

JSFiddle here

这是运行它的代码:

$(document).ready(function() {

  $(".example").each(function() {

    var imgheight = 300;
    var linkheight = $(this).find(".affiliate-tag").height();
    var h2height = $(this).find(".desc h2").height();

    $(this).find(".desc").height(670 - imgheight - h2height - linkheight - 30);

    $(this).find(".desc").dotdotdot({
      after: "a.readmore"
    });
  });

});

.container {
  width: 100%;
  height: auto;
}
.example {
  background: #eee;
  height: 670px;
  display: block;
  width: 300px;
  float: left;
  margin: 40px 40px;
}
.image {
  width: 100%;
  background: #000;
  display: block;
  overflow: hidden;
  height: 300px;
}
.image img {
  width: 100%;
  height: auto;
  display: block;
}
.desc {
  word-wrap: break-word;
  padding: 30px;
}
.affiliate-tag {
  padding: 30px;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.dotdotdot/1.6.10/jquery.dotdotdot.js"></script>

<div class="container">
  <div class="example">
    <div class="image">
      <img src="http://a1.dspnimg.com/data/l/9ac8f53d4b3ec8d77865fd1b542a7b1f_xRgXa9UV_l.jpg" />
    </div>
    <div class="desc">
      <h2>This is a title of a post and it can span 2 lines and maybe three?</h2>

      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
  </div>
  <div class="example">
    <div class="image">
      <img src="http://a1.dspnimg.com/data/l/3156205047987_i80wZOig_l.jpg" />
    </div>
    <div class="desc">
      <h2>This is a title of a post and it can span 2 lines</h2>

      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

    </div>
    <a href="www.google.com" class="affiliate-tag">Go to google.com</a>
  </div>
</div>

**更新**

这里和我想达到的效果差不多。 http://dunked.com/showcase

但我想做的是在描述下方添加一个链接，并在描述中考虑链接高度。然后降低描述高度，使其以较小的尺寸省略。

Answer 1

文本似乎以不同高度结束的问题是因为 h2 和 p 元素的行高不同。如果考虑到恒定垂直节奏的设计原则(您可以阅读更多相关信息 here 、 here 、 here 和 here )，这很容易纠正:

.desc h2 {
    font-size: 1.5em;
    line-height: 1em;
    margin-bottom: 1em;
}
.desc p {
    line-height: 1.5em;
}

这将使文本的底部以相同的垂直高度结束，因为每个 p 行的行高是 h2 元素行的乘数-高度。

此外，要在计算中包含填充，您应该使用 outerHeight() 而不仅仅是 height()。有一些计算必须修复，但它现在似乎可以正常工作:

$(document).ready(function () {

    $(".example").each(function () {

        var imgheight = 300;
        var linkheight = $(this).find(".affiliate-tag").outerHeight();
        var h2height = $(this).find(".desc h2").outerHeight();

        $(this).find(".desc").height(670 - imgheight - h2height - linkheight);

        console.log();

        $(this).find(".desc").dotdotdot({
            after: "a.readmore"
        });
    });

});

http://jsfiddle.net/teddyrised/dLp38687/18/