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工具下载插件
在这里插入图片描述

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

在这里插入图片描述

如何使用插件

首先在网页引入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>

实例：省略一段长文本

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();
})

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

实例：省略带标记的文本段落

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();
})

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

实例：省略留最后元素的文本

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标签" 元素可省略});
})

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

实例：可切换省略或显示完整文本

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;});

运行结果

在这里插入图片描述

实例：截断路径名

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'});						}});})