dReadmore是一个小型但可配置的jQueryJavaScript Read More/Read Less插件，用于文章摘录、文章描述、长文本块等。

该插件自动隐藏溢出的文本内容，并生成“更多/更少”按钮，允许用户通过平滑、可配置的滑动动画显示全文。

如何使用它:

1.将您的长文本与“阅读更多”按钮一起添加到页面中。

<!-- Text To Collapse & Expand -->
<div class="dreadmore">
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Impedit recusandae quas eaque laudantium quo, dolorem vitae quia cupiditate sit, exercitationem suscipit molestiae iste dolores eos facere mollitia voluptatibus nihil. Dicta ex blanditiis officiis beatae similique neque nostrum consequatur maiores quas!
</div>

<!-- Toggle Link -->
<button type="button"
        data-drm-toggler>
        Show More
</button>

2.添加一个线路高度到文本块，并使用最小高度所有物

.d-readmore {
  line-height: 1.8;
  min-height: 7px;
  overflow: hidden;
}

3.当文本展开时，隐藏切换链接。

.dreadmore--disabled {
  display: none;
}

4.在文本块上初始化插件并完成。

const dreadmore = new DReadMore({
      // options here
});

5.自定义“多读”和“少读”按钮的文本。

<button type="button"
  data-drm-toggler="drmKeyToggler"
  data-drm-toggler-more="Show more custom"
  data-drm-toggler-less="Close custom">
  Show more custom
</button>

// OR Via JavaScript
const dreadmore = new DReadMore({
      moreText: "Show more",
      lessText: "Close"
});

6.确定是否在页面加载时展开文本并调整窗口大小。默认值：false。

const dreadmore = new DReadMore({
      initialExpand: true,
      isInitialExpandWhenUpdate: true,
});

7.自定义切换按钮。

<div class="dreadmore" data-drm="toggler: drmKeyToggler">
  ...
</div>
<button type="button" data-drm-toggler="drmKeyToggler">Show more</button>

// OR VIA JAVASCRIPT
const dreadmore = new DReadMore({
      toggler: 'drmKeyToggler'
});

8.在before/togling之后执行回调函数。

const dreadmore = new DReadMore({

      beforeToggle: function($element, expanded) {
        console.log($element, expanded)
      },

      afterToggle: function($element, expanded) {
        console.log($element, expanded)
      },
      
});

9.销毁实例。

dreadmore.destroy();

10.更新实例。

window.addEventListener('resize', function() {
  dreadmore.forEach(function(item) {
    item.update();
  });
});

更新日志：

v2.2.1版本（2022-09-12）

• 添加：通过属性在按钮中指定文本的能力（更多的数据drm切换器和更少的数据drm切换器）。

v2.2.0版本（2022-09-05）

• 添加：可以在属性中指定切换（data drm=“toggler:drmKeyToggler”），您还需要在切换中指定属性（data rdm toggler=“drmKeyToggler”

v2.1.6版本（2022-08-23）

• 修复：将dReadMore应用于包含多个＜p＞标记的元素时，最小高度无法正常工作。

v2.1.0版本（2022-01-11）

• 删除了jQuery依赖项。
• 更新了方法和参数。

预览截图

平滑动画切换长文本块 dReadmore