ReadmoreJS-CodePen不输出任何内容

Question

我正在阅读ReadmoreJS，很高兴尝试使用CodePen。但是，当我阅读网站上的说明并在CodePen上实现了一些代码时，它根本无法工作。这是指向我的CodePen的链接，以查看代码。在“ JS”选项卡中，我确保将 jQuery 作为第一个脚本，并将 ReadmoreJS 作为依赖项。

以下是我的CodePen中的一些代码段：

  

HTML

<article>Lorem ipsum and all that jazz...</article>

  

JavaScript

$('article').readmore();

如您所见，我的目标是每个article标签，但它似乎没有用。也没有控制台错误。有人知道我可能会缺少什么吗？

Answer 1

问题是因为插件设置的默认折叠高度为200px：并且在您的CodePen示例中，<article>的高度不超过该高度，因此您看不到readmore插件开始起作用。

您可以set the collapsedHeight to something shorter than 200px，使用更长的文本或缩小<article>元素的宽度来查看插件的工作。

此外，您可能希望向样式表中添加article { overflow: hidden; }，以确保多余的内容被很好地隐藏起来。