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

2024-01-07 01:44

本文主要是介绍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'});						}});})
    

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

这篇关于dotdotdot插件快速实现多行文本的省略的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/578330

相关文章

hdu1043(八数码问题,广搜 + hash(实现状态压缩) )

利用康拓展开将一个排列映射成一个自然数,然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu

电脑桌面文件删除了怎么找回来?别急,快速恢复攻略在此

在日常使用电脑的过程中,我们经常会遇到这样的情况:一不小心,桌面上的某个重要文件被删除了。这时,大多数人可能会感到惊慌失措,不知所措。 其实,不必过于担心,因为有很多方法可以帮助我们找回被删除的桌面文件。下面,就让我们一起来了解一下这些恢复桌面文件的方法吧。 一、使用撤销操作 如果我们刚刚删除了桌面上的文件,并且还没有进行其他操作,那么可以尝试使用撤销操作来恢复文件。在键盘上同时按下“C

【C++】_list常用方法解析及模拟实现

相信自己的力量,只要对自己始终保持信心,尽自己最大努力去完成任何事,就算事情最终结果是失败了,努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一:什么是list? •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二:list常用接口 •🌰1.默认成员函数 🔥构造函数(⭐) 🔥析构函数 •🌰2.list对象

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全栈,前后端开发,小程序开发,人工智能,js逆向,App逆向,网络系统安全,数据分析,Django,fastapi

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现,因为rasa本身是带有remindschedule模块的。不过经过一番折腾后,忽然发现,chatbot上实现的定时,语音助手不一定会有响应。因为,我目前语音助手的代码设置了长时间无应答会结束对话,这样一来,chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢? 我最后选择的方法是用threading.Time

Android实现任意版本设置默认的锁屏壁纸和桌面壁纸(两张壁纸可不一致)

客户有些需求需要设置默认壁纸和锁屏壁纸  在默认情况下 这两个壁纸是相同的  如果需要默认的锁屏壁纸和桌面壁纸不一样 需要额外修改 Android13实现 替换默认桌面壁纸: 将图片文件替换frameworks/base/core/res/res/drawable-nodpi/default_wallpaper.*  (注意不能是bmp格式) 替换默认锁屏壁纸: 将图片资源放入vendo

C#实战|大乐透选号器[6]:实现实时显示已选择的红蓝球数量

哈喽,你好啊,我是雷工。 关于大乐透选号器在前面已经记录了5篇笔记,这是第6篇; 接下来实现实时显示当前选中红球数量,蓝球数量; 以下为练习笔记。 01 效果演示 当选择和取消选择红球或蓝球时,在对应的位置显示实时已选择的红球、蓝球的数量; 02 标签名称 分别设置Label标签名称为:lblRedCount、lblBlueCount

Kubernetes PodSecurityPolicy:PSP能实现的5种主要安全策略

Kubernetes PodSecurityPolicy:PSP能实现的5种主要安全策略 1. 特权模式限制2. 宿主机资源隔离3. 用户和组管理4. 权限提升控制5. SELinux配置 💖The Begin💖点点关注,收藏不迷路💖 Kubernetes的PodSecurityPolicy(PSP)是一个关键的安全特性,它在Pod创建之前实施安全策略,确保P

hdu 4565 推倒公式+矩阵快速幂

题意 求下式的值: Sn=⌈ (a+b√)n⌉%m S_n = \lceil\ (a + \sqrt{b}) ^ n \rceil\% m 其中: 0<a,m<215 0< a, m < 2^{15} 0<b,n<231 0 < b, n < 2^{31} (a−1)2<b<a2 (a-1)^2< b < a^2 解析 令: An=(a+b√)n A_n = (a +

工厂ERP管理系统实现源码(JAVA)

工厂进销存管理系统是一个集采购管理、仓库管理、生产管理和销售管理于一体的综合解决方案。该系统旨在帮助企业优化流程、提高效率、降低成本,并实时掌握各环节的运营状况。 在采购管理方面,系统能够处理采购订单、供应商管理和采购入库等流程,确保采购过程的透明和高效。仓库管理方面,实现库存的精准管理,包括入库、出库、盘点等操作,确保库存数据的准确性和实时性。 生产管理模块则涵盖了生产计划制定、物料需求计划、