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

最新推荐文章于 2024-09-10 10:26:11 发布
最新推荐文章于 2024-09-10 10:26:11 发布
阅读量1.4k 收藏 22
点赞数 18
分类专栏： JavaScript 文章标签： css 前端 html css3 javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AIMing_byte/article/details/135432248
版权

jQuery.dotdotdot

前言

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

概念

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

特点

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

下载文件

下载有三种方式

在这里我用的是第二种方式，直接使用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'
				});						
			}
		});
					
})

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

小明的Fire计划
关注
专栏目录
文本溢出插件jquery.dotdotdot.js使用方法详解
01-21
插件下载地址：https://github.com/FrDH/jQuery.dotdotdot 引入jQuery.js和jquery.dotdotdot.js [removed][removed] [removed][removed] 给包含文本的元素定一个宽高，当文本超过这个高度后会触发效果 变成省略号： <div class=box xss=removed> 测试测试
jQuery.dotdotdot, jquery dotdotdot，用于多行内容的高级 跨浏览器 省略号.zip
10-10
jQuery.dotdotdot, jquery dotdotdot，用于多行内容的高级 跨浏览器 省略号 jQuery.dotdotdotDotdotdot是一个用于截断网页上的多行内容的jQuery插件。 它使用省略号表示文本比当前可见的文本多。 可选的是，插件可以以在内容的末尾保留一个"阅读更多"锚，在省略号之后。当使用 jQuery
实现网页多行文本省略的终极指南
最新发布
weixin_42571280的博客
09-10 667
本文还有配套的精品资源，点击获取 简介：在网页设计中，为了在有限空间内显示文本摘要，经常需要处理多行文本的省略显示问题。CSS3虽然支持单行文本省略，但在多行文本处理上存在兼容性问题。本文介绍如何使用jQuery.dotdotdot插件来实现跨浏览器的多行文本省略效果，并提供详细的使用说明和配置选项，以及兼容性测试方法。 1. 多行文本省略的定义与需求 在现...
DotDotDot使用心得
Mr_xiao1001的博客
09-28 1279
1 如何给一段省略的文字后面加view more字样 使用的key值是after $("Element").dotdotdot({ wrap: "letter", ellipsis: "…", after: "#readMore" }); 2 使用的是dotdotdot截取的字符串，本来以为必须设置宽度才能截取正常，但是发现，不设置宽度，单方面设置最大高度，也可以截取正常，所以在...
溢出显示省略号插件dotdotdot.js
06-01
单行、多行文本溢出显示省略号插件dotdotdot.js
jQuery使用插件dotdotdot.js实现段落溢出显示省略号
qq84299的博客
07-14 5102
博客开发过程中遇到需要把多行文字溢出显示省略号，试过很多方法，感觉最好用的就是dotdotdot插件，下面介绍给大家使用。 1.先上图给大家看看效果 2.使用方法     引入插件     script src="jquery.js" type="text/javascript">script>     script
移动端的text-overflow多行文本溢出显示省略号(…)
12-10
例如，Clamp.js 和 jQuery.dotdotdot 插件提供了简单易用的API，只需几行代码就能实现多行文本的省略号效果： 1. Clamp.js 使用示例： ```javascript var module = document.getElementById("clamp-this-module")...
多行省略号
11-10
多行文本省略是指在有限的容器内，如果文本超出限定的高度，则在末尾添加省略号，以表示还有未显示的文本内容。这在新闻摘要、评论、产品介绍等场景中非常常见，能有效提升网页的视觉效果和用户体验。 **二、CSS3的...
cuttr-js:Cuttr 是一个 javascript 插件，使用多种截断方法和自定义省略号截断多行文本内容
08-04
Cuttr 是一个零依赖、易于使用的 JS / jQuery 库，它可以截断多行文本内容 (Line Clampin') 以适应给定的规范。 它添加了一个类似省略号 (...) 的结尾字符串，以指示可用文本多于当前可见的文本。 多种截断方法 在...
多行文本溢出问题的解决
等待のL先森的博客
11-25 2216
多行文本溢出问题的解决 我们都知道单行文本的溢出问题的解决办法，就是： 1.使用宽度with，来限制宽度 2. 使用white-space:nowrap/pre来强制限制换行； 3. 使用overflow:hidden隐藏溢出文本； 4. 使用text-flow:ellipsis来用...来表示隐藏的文本 那么多行呢？ 有以下几种方法： 1. 使用css3自带的属性-webkit-box来改变，具体方式： 代码示例： /*css代码：*/ ove
前端项目-jQuery.dotdotdot.zip
09-03
前端项目-jQuery.dotdotdot,用于多行内容的高级跨浏览器省略号的jquery插件。
dotdotdot文字溢出时添加在文字末尾加省略号
08-09
dotdotdot 文字溢出时，添加在文字末尾加省略号
文本溢出插件jquery.dotdotdot.js使用方法
第7维度 - 日常笔记
06-22 1403
插件下载地址：https://github.com/FrDH/jQuery.dotdotdot 引入jquery.js和jquery.dotdotdot.js<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.dotdotdot.js"></scrip
dotdotdot.js 中文特殊字符
热门推荐
希望能找到你的答案
08-03 14万+
在使用jquery.dotdotdot.min.js插件时，你会发现如果文本是中文的特殊字符，此时就无法解析了，因为需要配置插件wap属性，如下代码： $(".descript").dotdotdot({ wrap: 'letter' //注：中文必须改为letter });默认的配置是：word  ，所以需要考虑中文的特殊
dotdotdot.js文字超出隐藏常用功能记录
JiangZ的博客
01-01 2433
1.引用插件：<script src="jquery.js"></script><script src="jquery.dotdotdot.js"></script>2.CSS实现方法<div class="dot-ellipsis dot-height-50 dot-resize-update"> <p>Lorem ipsum dolor sit amet, consectetur adi
多行文本超出部分省略号原生JS插件使用记录
04-16 478
先看图片： 超出省略： 没超出隐藏： 这里直接写的 html 文件，原生的东西 放哪儿都适用 <style> body { padding: 20px; } .module { width: 250px; margin: 0 0 1em 0; overflow: hidden; } </styl...
探索jQuery.dotdotdot：优雅地管理你的文本溢出
gitblog_00085的博客
04-19 298
探索jQuery.dotdotdot：优雅地管理你的文本溢出 去发现同类优质开源项目:https://gitcode.com/ 是一个轻量级的JavaScript库，专门用于处理多行文本的省略号显示，以在有限的空间内优雅地展示长内容。它基于流行的jQuery框架，为网页开发者提供了一种简单而有效的方式来控制元素的内容和布局。 项目简介 在网页设计中，有时我们需要限制某些元素（如标题、摘要或评论）的...
css多行文本省略
06-02
要在 CSS 中实现多行文本省略，可以使用以下代码： ``` display: -webkit-box; -webkit-line-clamp: 3; /* 显示行数 */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; ``` 其中，`-webkit-box` 属性将元素作为一个弹性伸缩盒子模型显示，`-webkit-line-clamp` 属性用于设置显示的行数，`-webkit-box-orient` 属性用于设置盒子的子元素排列方式，`overflow` 属性用于控制内容溢出的部分如何处理，`text-overflow` 属性用于设置省略号的样式。需要注意的是，这些属性只在 WebKit 内核的浏览器中有效，如 Chrome 和 Safari。在其他浏览器中，需要使用其他方法实现多行文本省略。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值