jQuery.dotdotdot
前言
在"css新增文本样式"这篇,我们介绍了text-overflow属性省略多余的文本。用text-overflow属性可以直接省略单行文本,但省略多行文本,单独使用CSS是无法实现,今天我们介绍一款插件来简单的实现多行文本的省略。你学完之后就会发现省略多行文本是多么简单。
概念
Dotdotdot是一个JavaScript插件,主要用于截断网页上的多行内容。该插件可以在内容末尾、省略号之后保持可见的"阅读更多"锚点
特点
- 该插件会自动截断HTML标记,对HTML标签无影响
- 响应式,无需担心浏览器的大小是否会影响,省略号会即时更新
下载
下载有三种方式
-
使用CDN托管文件
-
使用NPM安装插件
sqlnpm i dotdotdot-js
-
直接从Githup存储库下载
在这里我用的是第二种方式,直接使用npm工具下载插件
下载完成之后会自动在你文件夹下生成以下文件
如何使用插件
-
首先在网页引入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>
-
实例:省略一段长文本
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(); })
运行结果
-
实例:省略带标记的文本段落
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(); })
运行结果
-
实例:省略留最后元素的文本
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标签" 元素可省略 }); })
运行结果
-
实例:可切换省略或显示完整文本
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内容
javascriptvar $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; } );
运行结果
-
实例:截断路径名
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' }); } }); })
运行结果