使用类元素和Javascript进行行箝位 - Line clamping using a class element and Javascript

Line clamping using a class element and Javascript

本文关键字：Javascript 元素 | 更新日期: 2023-09-27

我有一个输出数据的PHP脚本。它被方便地包裹在p class中。

它多次输出相同的数据和相同的类，因此大约有6个文本块，每个块都封装在p class中。

我需要使用任何可能的方法将每个块减少到3行。我已经尝试过以各种方式使用PHP，但都无济于事。

我偶然发现了看起来很棒的Clamp.js。唯一的问题是，它只能使用ID。我可以将p class标记更改为p id，但是，它们都必须共享相同的ID，这显然是行不通的。

这是我尝试过的当前代码：

var module = document.getElementsByClassName("clampjs");
$clamp(module, {clamp: 1});

和HTML（时间6）：

<div class="headtab">
<a href="f?forum=(forum number)">Forum title</a><p class="bold">Posted By:</p> username <p class="bold">In:</p> category</div>
<div class="maintext">
<p class="clampjs">TEXT I WANT TO BE CLAMPED</p>
</div>

就像我说的，当我使用ID时，它工作得很好，但很明显，只有第一个文本块的ID必须保持不变，这就是我使用p class的原因。

遗憾的是，我上面尝试的根本不起作用。有人知道这个脚本的一个小补丁吗，或者可能知道一个不同的脚本，它将使用class元素来钳制对象？Jquery也是可以接受的。

Jsfidle

由于已接受的答案，工作代码：

$(document).ready( function() {   
     $('.clampjs').css({  //changes the css of the clicked content.
            'max-height':'75px', //give what ever height you want.
            'overflow':'hidden'
        });

    });

只需编辑css即可轻松完成

$('.clampjs').click( function() { $(this).css({ //changes the css of the clicked content. 'height':'100px', //give what ever height you want. 'overflow':'hidden' }); });
刚刚在我的页面上测试了它的工作原理。。。