如何使用 dotdotdot 扩展截断的文本 onclick?

2023-12-07

我正在使用jQuery dotdotdot截断插件点点点.frebsite.nl

我想截断最多 2 行。当用户点击more,那么它必须显示全文(展开/取消截断)。

到目前为止,我“仅”设法截断我的文本。但不是“去截断”它。

这是我的代码:

<p class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae tellus eu dui placerat interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<a class="read-more" href="#">more</a></p>

$(document).ready(function(){

    $('.truncate').dotdotdot({
        ellipsis     : '… ',
        watch        : true,
        wrap         : 'letter',
        height       : parseInt( $('.truncate').css('line-height'), 10) * 2, // this is the number of lines
        lastCharacter: {
            remove: [ ' ', ',', ';', '.', '!', '?' ],
            noEllipsis: []
        },
        after: "a.read-more"
    });


});

现场演示jsfiddle.net/NSnxe/1


您可以向 dotdotdot 发送销毁消息

$('a.read-more').on( 'click', function(event) {
    event.preventDefault();
    $(this).parent().trigger("destroy");
});

http://jsfiddle.net/bhlaird/C5Ent/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 dotdotdot 扩展截断的文本 onclick? 的相关文章

  • 从一个页面导航到另一个页面时,JavaScript 不会执行

    我正在构建我的第一个 Ruby on Rails 应用程序 并尝试创建一个动画导航栏 我正在使用 jQuery 和 Turbolink 这是我的application js under app assets javascripts docu
  • jQuery show() 和 hide() 的更流畅替代方案

    我有一个带有隐藏列的页面设置 使用 jQuery show 和 hide 函数将列滑入和滑出 然而 它有点 笨重 并且在显示 隐藏时看起来不太流畅 相比之下 我还有一个使用 jquery UI 手风琴的页面部分 当在这些部分之间切换时 过渡
  • 如何在返回的 AJAX 调用上使用 django 模板标签?

    我有一个简单的 AJAX 脚本 它在名为的搜索字段中获取输入的字符串AJAXBox并调用一个视图函数 该函数使用过滤器查询数据库并返回与输入参数匹配的所有 User 对象的查询集 当我使用 django 模板标签迭代查询集时 它不起作用 我
  • 外部 CSS 是否应用于 jsPDF 生成的 pdf

    我已经开始使用 jspdf 制作一些演示 我有一个 html 文件 我的 css 在外部文件中 我写了下面的代码来生成我的pdf pdfButton on click function var pdf new jsPDF p in lett
  • 如何在 Jquery Chosen 插件中搜索乌尔都语?还有其他方法在 Selectbox 中搜索乌尔都语吗?

    基本上我想在选择框中有搜索选项 并在选择框中选择实现的 jquery 所有选项均采用乌尔都语语言 如何扩展所选搜索以匹配乌尔都语 或者还有另一种方法在选择框中搜索乌尔都语 任何其他建议 提前致谢 有一种非常简单的方法可以将所有正则表达式逻辑
  • JQuery:提交时不起作用

    我想要捕获所有表单提交事件 从操作属性获取 url 并使用它通过 AJAX 将表单内容发送到该地址 所以我只需要一个提交事件处理程序 然而我很快就遇到了麻烦 因为它似乎无法在 IE 中工作 document submit function
  • 代理递归函数

    想象一个简单的递归函数 我们试图包装它以检测输入和输出 A simple recursive function const count n gt n 1 count n 1 Wrap a function in a proxy to ins
  • 用于匹配重复子字符串的单个js正则表达式?

    假设我有一个字符串 例如 where is mummy where is daddy 我想用空字符串替换任何一组重复子字符串 所以在这种情况下where and is元素将被删除 结果字符串将是 mummy daddy 我想知道是否有任何单
  • React 功能组件:作为函数调用与作为组件调用

    假设我有一个功能组件 const Foo props gt div props name div 直接作为函数调用有什么区别 const fooParent gt div Foo name foo div 与将其称为组件相比 const f
  • 我可以阻止history.popstate在初始页面加载时触发吗?

    我正在开发一个通过 AJAX 提供内容的网站 如果您单击菜单中的某个项目 内容 div 会更新为 get回应 没什么花哨的 我正在实施history pushState允许使用浏览器的后退 前进按钮进行导航 我有以下内容可以在历史导航上加载
  • 类型错误:require.config 不是一个函数

    我正在使用 require js 作为早午餐项目的一部分 这段代码抛出错误 require config require config is not a function paths jquery lib jquery underscore
  • 从变量值动态设置 ng-controller

    我正在使用 AngularJs 和 NodeJS 开发一个应用程序 我对将控制器的名称设置为主控制器中的变量的值感到震惊 为了更好地解释它 我的 index html 看起来像这样 tbody tr td td td member task
  • Jquery .scrollTop() 不工作

    标题解释了我的问题 这是我的代码 my div ul scrollTop my div ul 0 scrollHeight my div 使用 AJAX 填充 因此 在我的 ajax 请求中 我有一个执行上述代码的成功回调 ajax url
  • 当用户输入/删除时,使文本字段中的提示消失/重新出现[关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 有谁知道我怎样才能在我的搜索栏中做出
  • 新部署后,React 应用程序必须清除浏览器缓存

    我们正在使用 Jenkins 管道在 apache 服务器上部署 React 应用程序 当我们部署新代码时 大多数新功能都可以正常工作 但并非所有更改都反映浏览器中的最新内容 用户必须打开隐身窗口或清除缓存才能看到新功能 我见过一些相关的解
  • 在Vue.js 3中添加全局变量

    如何在 Vue js 3 中添加全局变量 在 Vue js 2 中 我们在main js file Vue prototype myGlobalVariable globalVariable 最直接的替换就是app config globa
  • 处理照片上传的最佳方式是什么?

    我正在为一个家庭成员的婚礼制作一个网站 他们要求的一个功能是一个照片部分 所有客人都可以在婚礼结束后前往并上传他们的照片 我说这是一个很棒的想法 然后我就去实现它 那么只有一个问题 物流 上传速度很慢 现代相机拍摄的照片很大 2 5 兆 我
  • 如何使用 jQuery 检测浏览器是否关闭

    我需要使用 jQuery 检测浏览器是否被关闭 如果是这样 则执行一个事件 我的网站上有一个聊天功能 很像 Facebook 可以让用户在导航到网站结构中的其他页面时保持登录状态 但如果他们单击 则需要将他们从聊天中注销 这样他们就不会在线
  • CSS 或 Javascript - 如果背景图像未加载,则显示后备文本[重复]

    这个问题在这里已经有答案了 如果徽标图形文件未加载或丢失 如何显示文本而不是徽标 我有带有背景 PNG 图像的 div div class iHaveBgImage this text should be displayed if bg i
  • JavaScript 开关(真)

    你好 我正在尝试处理 ajax json 响应 这是我的代码 success function j switch true case j choice1 alert choice2 break case j choice2 alert ch

随机推荐

  • Django时区感知DateTimeField默认值时区感知错误

    我正在尝试将 DateTimeField 添加到我的 django 模型中 并以最大时间戳作为默认值 我已经弄清楚 Django 中的最大时间戳是 9999 12 31 23 59 59 与我的 postgres 数据库中使用的最大时间戳不
  • 内存通常比磁盘快多少?

    IDE SCSI SSD SATA 或所有这些 我很惊讶 本文中间的图3 大数据的病理学 表示进行顺序访问时内存仅快 6 倍左右 内存为 350 Mvalues sec 而磁盘为 58 Mvalues sec 但当您进行随机访问时 速度大约
  • std::enable_if 如何工作?

    我刚刚问了这个问题 std numeric limits 作为条件 我明白用法在哪里std enable if将有条件地定义方法的返回类型 导致该方法无法编译 template
  • 按 Column.DisplayMember 对 DataGridView 进行排序

    我有一个DataGridView有几个DataGridViewComboBoxColumn实际值与 ID 相关联 但DisplayMember是查找表中的字符串对应项 我试图做到这一点 以便当我按该列排序时 排序是根据DisplayMemb
  • 适用于 SUN Solaris 和 linux 的 awk + ​​fit 语法

    需要以下方面的帮助 当我在 Linux 上运行以下命令时 它运行良好 awk v NAME MACHINE 1 NAME etc hosts 但在 SUN Solaris 上我得到以下信息 awk v NAME MACHINE 1 NAME
  • 使用 Spring 依赖注入的自定义转换器

    有没有一种方法可以在 Dozer 中定义自定义转换器 用于将一种顶级类型转换为另一种顶级类型 而另一种类型本身就是一个 Spring bean 因此可以注入其依赖项 dozer 文档建议添加以下 XML 定义
  • 如何在 ios 图表中添加标记到中心位置,同时水平滚动并增加scaleX并启用拖动

    我正在使用 Daniel Cohen Gindi 的图表框架 我通过增加scaleX值并启用拖动来水平滚动图表 如这个问题的答案中所述 快速设置我的条形图的水平滚动 我想当用户水平滚动时在中心位置添加标记 我知道每当用户拖动图表时都会调用
  • 如何更改 Zend Framework 的包含目录

    我收到以下错误消息 Warning include once Zend Db php function include once failed to open stream No such file or directory in C Ea
  • 如何将日期变量转换为java.sql.date

    我在尝试将日期变量插入数据库表时遇到困难 我的变量叫做 Date date4 date4 变量值是从具有日历选择器的文本框中读取的 为了插入日期列 我将字段类型设置为日期 preparedstmt setDate 4 date4 然而 提交
  • 检查数组是否包含其他数组的所有元素?

    我有2个数组 第二个数组必须包含第一个数组中的所有元素 如何检查 谢谢 For example array 1 Array 0 gt Email 1 gt 1 Name array 2 Array 0 gt 1 Name 1 gt In t
  • 在 msvc++ 2010 Express 中似乎找不到 std::thread

    我最近一直在阅读有关 c 的各种新添加内容 我对此感到非常兴奋 并且我已经了解了新的 std unique ptr 和 std shared ptr 对象 它们非常有用 现在我正在寻找对于我听说过的本机线程库 但似乎无法在任何地方找到它 我
  • 无法在本地有效地使用 Git

    请参见格雷格的回答 我不明白丹尼尔的声明线程完全地 为什么要手动复制文件 周围有什么吗 当然你应该只是 将它们添加到存储库中 然后查看 并根据需要进行承诺 我没看到 需要移动文件 这似乎违背了整个目的 本地结账 我目前正在使用 rsync
  • 如何在单击按钮时检查 gridview 列中复选框的状态

    我在gridview中使用了复选框列 单击链接按钮时 应检查 gridview 中的复选框是否已选中 如果没有选中任何复选框 则应显示警报 至少选中一个复选框 您必须向页面添加一些自定义 Javascript 以便显示客户端警报 下面是我编
  • jQuery 的“双击”事件(移动设备为 dblclick)

    我有以下 jquery 事件处理函数 target on dblclick function respond to double click event 我的问题是这个事件处理程序不适用于触摸设备 iPhone iPad 谁能推荐一个可靠的
  • bwmorph 的 Python 等效项

    我仍在用 Python 编写指纹图像预处理器 我在 MATLAB 中看到有一个特殊的函数可以消除 H 中断和杂散 bwmorph a hbreak bwmorph a spur 我搜索了 scikit OpenCV 等 但找不到这两种用法的
  • Node.js 服务的压力测试[关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心以获得指导 我正在使用node js
  • 在 $unwind 之前检查子文档是否不为空

    我有一个Job包含 job title job location salary 等的 schema 应用架构将子文档嵌入到工作文档中 它存储该特定工作已收到的所有申请 这是作业架构的样子 const jobSchema new Schema
  • mysql.connector 不给出 Python 中的最后数据库状态

    I use mysql connectorPython 中的库将查询发送到数据库 但是 当数据库在初始化后发生更改时 mysql connector工具的回答就像数据库从未改变过一样 例如 假设我有一张极简主义的桌子students只有两列
  • 在节点中将 ieee754 转换为十进制

    我在节点中有一个缓冲区
  • 如何使用 dotdotdot 扩展截断的文本 onclick?

    我正在使用jQuery dotdotdot截断插件点点点 frebsite nl 我想截断最多 2 行 当用户点击more 那么它必须显示全文 展开 取消截断 到目前为止 我 仅 设法截断我的文本 但不是 去截断 它 这是我的代码 p cl