在.dotddot脚本中将高度值从px更改为%

Change height value from px to % in .dotdotdot script

本文关键字：px 脚本 dotddot 高度      更新时间：2024-01-17

如何将高度值从100像素更改为百分比值？比方说50%。我对javascript相当陌生。。。

<script language="javascript" type="text/javascript">
$(document).ready(function(){
    $(".item-info-overlay p").dotdotdot({
        ellipsis:"...",
        wrap:"word",
        height: 100,
        after:"a.readmore",})
    });
</script>

与其修改dotdotdot代码，不如根据百分比计算像素值并将该像素值传递给dotdotdot。

例如：

// define your desired percentage
var percentage = 50;
jQuery(function() {
  // calculate pixel height based on your percentage
  var dot_height = jQuery('div#container').height() * (percentage / 100);
  jQuery("div#text").dotdotdot({
    ellipsis: "...",
    height: dot_height,
    wrap: "word",
    after: "a.readmore",
    watch: "window"
  });
});
div#container {
  height: 150px;
  background-color: #CCC;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.dotdotdot/1.7.2/jquery.dotdotdot.min.js"></script>
<div id="container">
  <div id="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
    volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu
    dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros. Quisque facilisis erat a dui. Nam malesuada ornare dolor.
    <a href="#" class="readmore">Read More</a>
  </div>
</div>

如果你正在构建一个响应式网站，或者你的容器是流动的，你可以在节流的调整大小处理程序中应用同样的逻辑。

相关文章：