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中不低於

回答

相關問題