readmore.js把div里面的“readmore”链接放在下面

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 / annotation中放入“read more”链接，以便它不会移动到下面的任何内容？

更新：在第一次回答后，我发现我需要一个固定的高度块用于文本，并且只在必要时放入内部阅读，谢谢

UPDATE2： 确定找到了我的问题的解决方案，但它是解决方法

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

Answer 1

让＆＃34;阅读更多＆＃34;注释标记内的链接，您可以使用：

（请注意，＆＃34;阅读更多＆＃34;链接包含在span标记中，其中class =＆＃34; lnk＆＃34;）

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