readmore.js把div中的“readmore”链接放在div中不低于

我已经创建了可能或不可能很长的注释，所以我想使用readmore.js插件。正如我的注释也可以是空的，我必须设置DIV的最低高度，以确保所有具有相同的大小（它是4个对象的行）readmore.js把div中的“readmore”链接放在div中不低于

<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 /注释，所以它不会移动下面的任何东西？

UPDATE：第一个回答后，我发现我需要的文本高度固定块，并把里面更仅在必要时读，感谢

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

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

来源

2016-02-25 Mi Ro

为了把“更多”的注释标签内的链接，你可以使用：

（请注意，“更多”链接被包裹在带有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; 
}

现在所有注释具有相同的高度（例如70像素）

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

来源

2016-02-26 01:01:54 Aywac

谢谢，现在它在里面，但是当我从div中删除最小高度时，它将移动所有其他具有短注释的项目我正在寻找一种方法来获得固定大小的文本块（即使没有文本）和有更多的“阅读更多”只是为了那些更长的...没有移动的物体低于有可能吗？ –

你是否试图给div标签一个最小高度：70px;例如，在脚本中添加collapsedHeight：80或更多？ collapsedHeight值应该高于最小高度值。 – Aywac

是的，当我玩这些值，一个结果是“阅读更多”没有显示或阅读更多显示给每个注释，甚至没有必要和更多只是显示更多的空位 –

readmore.js把div中的“readmore”链接放在div中不低于

回答

相关问题