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

jQuery.dotdotdot

前言

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

概念

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

特点

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

下载

下载有三种方式

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

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

如何使用插件

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

    html 复制代码
    <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内容

    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内容

    js 复制代码
    $(function(){
        //直接引用dotdotdot方法
        $("#dot1").dotdotdot();
    })

    运行结果

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

    HTML内容

    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内容

    js 复制代码
    $(function(){
         //直接引用dotdotdot方法
        $("#dot2").dotdotdot();
    })

    运行结果

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

    HTML内容

    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内容

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

    运行结果

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

    HTML内容

    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内容

    javascript 复制代码
    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内容

    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内容

    javascript 复制代码
    $(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'
    				});						
    			}
    		});
    					
    })

    运行结果

相关推荐
小二·几秒前
前端笔记:HTML output标签介绍及用法
javascript·笔记·html5
宁雨桥11 分钟前
前端登录加密实战:从原理到落地,守护用户密码安全
前端·安全·状态模式
椒盐螺丝钉24 分钟前
TypeScript类型兼容性
运维·前端·typescript
_JinHao28 分钟前
Cesium Viewer对象详解——Cesium基础笔记(快速入门)
前端·javascript·笔记·3d·webgl
正义的大古32 分钟前
OpenLayers地图交互 -- 章节十三:拖拽旋转交互详解
javascript·vue.js·openlayers
r0ad1 小时前
从痛点到解决方案:为什么我开发了Chrome元素截图插件
前端·chrome
OEC小胖胖1 小时前
连接世界:网络请求 `wx.request`
前端·微信小程序·小程序·微信开放平台
jingling5551 小时前
解决微信小程序真机调试中访问本地接口 localhost:8080 报错
前端·微信小程序·小程序
en-route1 小时前
使用 Flask 构建 Web 应用:静态页面与动态 API 访问
前端·python·flask
IT_陈寒1 小时前
Vite 5年迭代揭秘:3个核心优化让你的项目构建速度提升200%
前端·人工智能·后端