javascript - readmore.js 将 "readmore"链接放在不低于 div 的内部

Question

我创建的注释可能很长也可能不长，所以我想使用 readmore.js 插件。 由于我的注释可能也是空的，我必须设置 div 的最小高度以确保所有的都具有相同的大小(它是 4 个对象的行)

<annotation>
  <div style="width:100%;min-height:70px;overflow:hidden;">
    <p><%= p.annotation %></p>
  </div>
</annotation>

这是 readmore.js 部分

<script>
$('annotation').readmore({
  speed: 75,
  collapsedHeight: 60,
  moreLink: '<a href="#">Ukáž viac</a>',
  lessLink: '<a href="#">Schovaj</a>'
});
</script>

我的问题是当我有更长的注释时，阅读更多文本放在注释标签下面，而不是里面，所以这个 div 下面的所有内容都移动了一行

有什么方法可以将“阅读更多”链接放在 div/注释中，这样它就不会在下面移动任何东西吗？

更新:在第一次回答后我发现我需要一个固定高度的文本 block 并放入其中，仅在必要时阅读更多内容，谢谢

更新 2: 确定找到了解决我的问题的方法，但它是解决方法

 <% if p.annotation.length < 90 %>
                            <div style="height:11px"></div>
                            <% end %>

Answer 1

要将“阅读更多”链接放在注释标签内，您可以使用它:

(请注意，“阅读更多”链接包含在带有 class="lnk"的 span 标签中)

Javascript:

$('annotation div').readmore({
  speed: 75,
  collapsedHeight: 70, // same as min-height in div tag
  moreLink: '<span class="lnk"><a href="#">Ukáž viac</a></span>',
  lessLink: '<span class="lnk"><a href="#">Schovaj</a></span>'
});

CSS:

annotation {
  position: relative;
}

.lnk {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 10px;
  background-color: white;
}

现在所有注释的高度都相同(示例中为 70px)

http://codepen.io/Aywac/pen/yeWqvd