javascript - 使用类元素和 Javascript 进行线钳位

Question

我有一个输出数据的 PHP 脚本。所有这些都方便地包装在 p class 中。

它多次输出相同的数据和相同的类，所以大约有 6 个文本 block ，每个 block 都包裹在 p class 中。

我需要使用任何可能的方法将每个 block 减少到 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 时它工作正常，但显然，只有第一个文本 block 因为 ID 必须保持不变，这就是我使用 p class 的原因.

遗憾的是，我在上面尝试过的方法根本不起作用。有没有人知道这个脚本的一点修复，或者可能是一个不同的脚本，它会使用 class 元素来限制对象？ Jquery 也可以接受。

Jsfiddle

工作代码感谢接受的答案:

$(document).ready( function() {   

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


    });

Answer 1

只需编辑您的 css 即可轻松完成此操作

$('.clampjs').click( function() {   

     $(this).css({  //changes the css of the clicked content.
            'height':'100px', //give what ever height you want.
            'overflow':'hidden'
        });


    });

刚刚在我的页面上测试它有效...