dotdotdot插件快速实现多行文本的省略

jQuery.dotdotdot

前言

在“css新增文本样式(完整)”这篇,我们介绍了text-overflow属性省略多余的文本。用text-overflow属性可以直接省略单行文本,但省略多行文本,单独使用CSS是无法实现,今天我们介绍一款插件来简单的实现多行文本的省略。你学完之后就会发现省略多行文本是多么简单。

概念

Dotdotdot是一个JavaScript插件,主要用于截断网页上的多行内容。该插件可以在内容末尾、省略号之后保持可见的”“锚点

特点

  • 该插件会自动截断HTML标记,对HTML标签无影响
  • 响应式,无需担心浏览器的大小是否会影响,省略号会即时更新

下载文件

下载有三种方式

  • 使用CDN托管文件

    cdnjs.com/libraries/jQuery.dotdotdot

  • 使用NPM安装插件

    npm i dotdotdot-js
    
  • 直接从Githup存储库下载

    https://github.com/FrDH/dotdotdot-js

在这里我用的是第二种方式,直接使用npm工具下载插件
在这里插入图片描述
在这里插入图片描述

下载完成之后会自动在你文件夹下生成以下文件

在这里插入图片描述

如何使用插件

  1. 首先在网页引入dotdotdot.js文件

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" language="javascript" src="node_modules/dotdotdot/src/js/jquery.dotdotdot.js"></script>
    
  2. 实例:省略一段长文本

    HTML内容

    	<div class="example"><p><strong>一段长文本:</strong></p><div class="l"><p class="before">之前:</p><div class="box before">康桥的灵性全在一条河上;康河,我敢说是全世界最秀丽的一条水。河的名字是葛兰大(Granta),也有叫康河(Kiver Cam)的,许有上下流的区别,我不甚清楚。河身多的是曲折,上游是有名的拜伦潭——“Byron’s Pool”——当年拜伦常在那里玩的;有一个老村子叫格兰骞斯德,有一个果子园,你可以躺在累累的桃李树荫下吃茶。</div></div><div class="r"><p class="after">现在:</p><div class="box after" id="dot1">康桥的灵性全在一条河上;康河,我敢说是全世界最秀丽的一条水。河的名字是葛兰大(Granta),也有叫康河(Kiver Cam)的,许有上下流的区别,我不甚清楚。河身多的是曲折,上游是有名的拜伦潭——“Byron’s Pool”——当年拜伦常在那里玩的;有一个老村子叫格兰骞斯德,有一个果子园,你可以躺在累累的桃李树荫下吃茶。</div></div></div>
    

    script内容

    $(function(){//直接引用dotdotdot方法$("#dot1").dotdotdot();
    })
    

    运行结果
    在这里插入图片描述

  3. 实例:省略带标记的文本段落

    HTML内容

    <div class="example"><p><strong>带标记的文本段落:</strong></p><div class="l"><p class="before">之前:</p><div class="box before">	<p><strong>康桥</strong>的灵性全在一条河上;康河,我敢说是全世界最秀丽的<em>一条水</em></p><p>河的名字是<strong>葛兰大(Granta)</strong>,也有叫<mark>康河(Kiver Cam)</mark>的,许有<em>上下流</em>的区别,我不甚清楚。</p><p>河身多的是曲折,上游是有名的<strong>拜伦潭</strong>——<mark>“Byron’s Pool”</mark>——当年拜伦常在那里玩的;有一个老村子叫格兰骞斯德,有一个果子园,你可以躺在累累的<em>桃李树荫下</em>吃茶。</p></div></div><div class="r"><p class="after">现在:</p><div class="box after" id="dot2"><p><strong>康桥</strong>的灵性全在一条河上;康河,我敢说是全世界最秀丽的<em>一条水</em></p><p>河的名字是<strong>葛兰大(Granta)</strong>,也有叫<mark>康河(Kiver Cam)</mark>的,许有<em>上下流</em>的区别,我不甚清楚。</p><p>河身多的是曲折,上游是有名的<strong>拜伦潭</strong>——<mark>“Byron’s Pool”</mark>——当年拜伦常在那里玩的;有一个老村子叫格兰骞斯德,有一个果子园,你可以躺在累累的<em>桃李树荫下</em>吃茶。</p></div></div></div>
    

    script内容

    $(function(){//直接引用dotdotdot方法$("#dot2").dotdotdot();
    })
    

    运行结果
    在这里插入图片描述

  4. 实例:省略留最后元素的文本

    HTML内容

    <div class="example"><p><strong>留最后元素的文本:</strong></p><div class="l"><p class="before">之前:</p><div class="box before">康桥的灵性全在一条河上;康河,我敢说是全世界最秀丽的一条水。河的名字是葛兰大(Granta),也有叫康河(Kiver Cam)的,许有上下流的区别,我不甚清楚。河身多的是曲折,上游是有名的拜伦潭——“Byron’s Pool”——当年拜伦常在那里玩的;有一个老村子叫格兰骞斯德,有一个果子园,你可以躺在累累的桃李树荫下吃茶。<a href="#" class="readmore"></a></div></div><div class="r"><p class="after">现在:</p><div class="box after" id="dot3">康桥的灵性全在一条河上;康河,我敢说是全世界最秀丽的一条水。河的名字是葛兰大(Granta),也有叫康河(Kiver Cam)的,许有上下流的区别,我不甚清楚。河身多的是曲折,上游是有名的拜伦潭——“Byron’s Pool”——当年拜伦常在那里玩的;有一个老村子叫格兰骞斯德,有一个果子园,你可以躺在累累的桃李树荫下吃茶。<a href="#" class="readmore"></a></div></div></div>
    

    script内容

    $(function(){$("#dot3").dotdotdot({after:"a.readmore"  //after语法格式:"元素.class标签" 元素可省略});
    })
    

    运行结果
    在这里插入图片描述

  5. 实例:可切换省略或显示完整文本

    HTML内容

    <div class="example"><p><strong>可切换省略或显示完整文本:</strong></p><div class="l"><p class="before">之前:</p><div class="box before">康桥的灵性全在一条河上;康河,我敢说是全世界最秀丽的一条水。河的名字是葛兰大(Granta),也有叫康河(Kiver Cam)的,许有上下流的区别,我不甚清楚。河身多的是曲折,上游是有名的拜伦潭——“Byron’s Pool”——当年拜伦常在那里玩的;有一个老村子叫格兰骞斯德,有一个果子园,你可以躺在累累的桃李树荫下吃茶。</div></div><div class="r"><p class="after">现在:</p><div class="box after" id="dot4">康桥的灵性全在一条河上;康河,我敢说是全世界最秀丽的一条水。河的名字是葛兰大(Granta),也有叫康河(Kiver Cam)的,许有上下流的区别,我不甚清楚。河身多的是曲折,上游是有名的拜伦潭——“Byron’s Pool”——当年拜伦常在那里玩的;有一个老村子叫格兰骞斯德,有一个果子园,你可以躺在累累的桃李树荫下吃茶。</div></div></div>

    script内容

    var $dot4 = $('#dot4');$dot4.append( ' <a class="toggle" href="#"><span class="open">[ + ]</span><span class="close">[ - ]</span></a>' );function createDots(){$dot4.dotdotdot({after: 'a.toggle'});}function destroyDots() {$dot4.trigger( 'destroy' );}createDots();$dot4.on('click','a.toggle',function() {$dot4.toggleClass( 'opened' );if ( $dot4.hasClass( 'opened' ) ) {destroyDots();} else {createDots();}return false;});
    

    运行结果

在这里插入图片描述

  1. 实例:截断路径名

    HTML内容

    <div class="example"><p><strong>截断路径名:</strong></p><div class="l"><p class="before">之前:</p><div class="box before pathname"><div class="pathname">www.baidu.com/index.html</div><div class="pathname">www.baidu.com//isidx/home/pathname/index.html</div></div></div><div class="r"><p class="after">现在:</p><div class="box after pathname" id="dot5"><div class="pathname">www.baidu.com/index.html</div><div class="pathname">www.baidu.com//isidx/home/pathname/index.html </div></div></div></div>
    

    script内容

    $(function(){$('#dot5 .pathname').each(function() {var path = $(this).html().split( '/' );if ( path.length > 1 ) {var name = path.pop();$(this).html( path.join( '/' ) + '<span class="filename">/' + name + '</span>' );$(this).dotdotdot({after: '.filename',wrap: 'letter'});						}});})
    

    运行结果
    在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/611223.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

RabbitMQ高级

文章目录 一.消息可靠性1.生产者消息确认2.消息持久化3.消费者确认4.消费者失败重试 MQ的一些常见问题 1.消息可靠性问题:如何确保发送的消息至少被消费一次 2.延迟消息问题:如何实现消息的延迟投递 3.高可用问题:如何避免单点的MQ故障而导致的不可用问题 4.消息堆积问题:如…

了解不同方式导入导出的速度之快

目录 一、用工具导出导入 Navicat&#xff08;速度慢&#xff09; 1.1、导入&#xff1a; 共耗时&#xff1a; 1.2、导出表 共耗时&#xff1a; 二、用命令语句导出导入 2.1、mysqldump速度快 导出表数据和表结构 共耗时&#xff1a; 只导出表结构 导入 共耗时&…

【前沿技术杂谈:ChatGPT】ChatGPT——热潮背后的反思

【前沿技术杂谈&#xff1a;ChatGPT】ChatGPT——热潮背后的反思 缘起&#xff1a;无中生有&#xff0c;涅槃重生人工智能技术人工智能的发展史无中生有内容自动生成技术的发展代表企业OpenAI-GPT系列技术的发展历程ChatGPT新特点 热潮&#xff1a;万众瞩目&#xff0c;群雄逐鹿…

Super关键字

与this关键字用法相同&#xff0c;但super关键字指的是父类的对象 我们常用super.来调用父类对象的属性或者方法 super关键字出来调用父亲的属性还可以调用父亲的方法&#xff0c;方式也是super. super() super()表示调用父类的无参构造 super(参数列表)表示调用父类的有参…

Java中的网络编程

文章目录 网络基础知识IP 地址端口协议 Java 中网络编程InetAddress&#xff08;静态类&#xff09;UDP 通信原理UDP 发送数据步骤UDP 接收数据步骤UDP 发送接收案例 TCP 通信原理TCP 发送数据步骤TCP 接收数据步骤TCP 发送接收案例 网络基础知识 概述&#xff1a;在网络通信协…

认识Linux指令之与时间相关的指令

01.date命令 date 指定格式显示时间&#xff1a; date %Y:%m:%d date 用法&#xff1a;date [OPTION]... [FORMAT] 1.在显示方面 在显示方面&#xff0c;使用者可以设定欲显示的格式&#xff0c;格式设定为一个加号后接数个标记&#xff0c;其中常用的标记列表如下 %H : …

【揭秘APT攻击】——内网渗透实战攻略,带你领略网络安全的绝密世界!

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 &#x1f4ab;个人格言:"没有罗马,那就自己创造罗马~" 目录 介绍 什么是内网&#xff1f; 什么是内网渗透&#xff1f; 内网渗透的目的&#xff1a; 内网…

天鹅目标检测数据集VOC格式280张

天鹅&#xff0c;一种优雅而美丽的鸟类&#xff0c;以其洁白的羽毛、优美的身姿和动人的歌声而闻名。 天鹅属于鸟纲、鸭科&#xff0c;是一种大型水禽。它们的羽毛通常是白色、黑色或灰色&#xff0c;非常光滑且富有光泽。天鹅的头部和颈部非常细长&#xff0c;呈现出优雅的曲…

烟雾识别摄像机

烟雾识别摄像机是一种具有智能识别功能的监控设备&#xff0c;它能够通过图像识别技术检测和识别烟雾&#xff0c;提供实时监测和报警功能。这种摄像机通常应用于各种场所&#xff0c;如工厂、仓库、办公楼、酒店等&#xff0c;起到了重要的安全监测作用。 烟雾识别摄像机的工作…

新手练习项目 4:简易2048游戏的实现(C++)

名人说&#xff1a;莫听穿林打叶声&#xff0c;何妨吟啸且徐行。—— 苏轼《定风波莫听穿林打叶声》 Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#xff09; 目录 一、效果图二、代码&#xff08;带注释&#xff09;三、说明 一、效果图 二、代码&#xff08;带…

光伏方案设计有什么注意点?

光伏方案设计是实现光伏发电系统高效运行的关键环节。在进行光伏方案设计时&#xff0c;有几个重要的注意点需要特别关注。 首先&#xff0c;要充分考虑地理位置和气候条件。不同地区的日照时数、太阳辐射强度和日照角度都有所不同&#xff0c;这些因素直接影响光伏发电系统的发…

FS【1】:SSP

文章目录 前言1. Abstract2. Introduction2.1. Motivation2.1.1. Few-shot Segmentation (FSS) Task2.1.2. Few-shot Segmentation (FSS) Problem 2.2. Contribution 3. Methods3.1. Motivation3.2. Overview of the architecture4.3. Self-support Prototype4.4. Adaptive Sel…

C++:多态究竟是什么?为何能成为面向对象的重要手段之一?

C&#xff1a;多态究竟是什么&#xff1f;为何能成为面向对象的重要手段之一&#xff1f; 前言一、多态的概念二、多态的定义及实现2.1 多态的构成条件2. 2 虚函数2.3 虚函数的重写2.3.1 虚函数重写的例外1&#xff1a;协变(基类与派生类虚函数返回值类型不同)2.3.2 虚函数重写…

领域驱动模型之各层实体严格分层处理

为什么要分层处理呢&#xff1f; 在领域驱动模型中&#xff0c;分为应用层&#xff08;application&#xff09;、领域层&#xff08;domain&#xff09;、基础设施层&#xff08;infrastructure&#xff09;。各层只能处理和访问自己所属层的 entity 或者 dto 对象&#xff0…

基于ssm的理财通的设计与实现+jsp论文

摘 要 在如今社会上&#xff0c;关于信息上面的处理&#xff0c;没有任何一个企业或者个人会忽视&#xff0c;如何让信息急速传递&#xff0c;并且归档储存查询&#xff0c;采用之前的纸张记录模式已经不符合当前使用要求了。所以&#xff0c;对理财信息管理的提升&#xff0c…

针对大规模服务日志敏感信息的长效治理实践

文章目录 1 背景2 目标与措施3 实施3.1 脱敏工具类3.2 JSON脱敏3.3 APT自动脱敏3.3.1 本地缓存问题3.3.2 JDK序列化问题 3.4 弃用方案 4 规划5 总结 1 背景 近年来&#xff0c;国家采取了多项重要举措来加强个人数据保护&#xff0c;包括实施《中华人民共和国网络安全法》和《…

TypeError: Cannot read properties of undefined (reading ‘namespace‘)

项目场景&#xff1a; 背景&#xff1a; Java 项目中使用 activi 流程引擎&#xff0c; 创建一个带有排他网关的 申请审核流程&#xff0c; 创建之后 查看 流程图出现 如下所示的 错误信息。 前端页面 不显示 任何 流程图信息。 问题描述 问题&#xff1a; 例如&#xff1…

鸿蒙系列--属性动画

一、定义 当组件的通用属性发生改变时而产生的属性渐变效果 说明&#xff1a; 当组件的通用属性发生改变时&#xff0c;组件状态由初始状态逐渐变为结束状态的过程中&#xff0c;会创建多个连续的中间状态&#xff0c;逐帧播放后&#xff0c;就会形成动画 二、创建 给组件(如…

SCS模型(径流曲线法)概述

目录 1.介绍&#xff1a;2.计算公式&#xff1a;参考文献&#xff1a;小结&#xff1a; 1.介绍&#xff1a; SCS模型&#xff08;径流曲线法&#xff09;是由美国农业部水土保持局(Soil Conservation Service) 基于经验提出&#xff0c;最初用于预测在农业用地小型流域降雨所累…

【算法每日一练]-dfs (保姆级教程 篇9) #俄罗斯方块 #ABC Puzzle #lnc的工资

目录 今日知识点&#xff1a; 二维图形的状态压缩&#xff0c;存下所有的合法状态然后暴力遍历 dfs的优化剪枝 二项式定理 俄罗斯方块 ABC Puzzle lnc的工资 俄罗斯方块 322D 题意&#xff1a;在4*4方格中分别给出3个俄罗斯方块&#xff0c;问是否可以经过旋转&#xf…