多行文本超出时显示省略号----jquery.ellipsis.js

最新推荐文章于 2024-08-26 15:06:44 发布

红豆灬

最新推荐文章于 2024-08-26 15:06:44 发布

阅读量4.3k

点赞数 3

分类专栏：网页布局常用插件及工具文章标签：插件 jquery javascript

本文链接：https://blog.csdn.net/doulinxu/article/details/56672640

版权

博客介绍了如何使用jquery.ellipsis.js这个jQuery插件来实现多行文本超出容器时的隐藏。该插件适用于jQuery1.7.0及以上版本，支持单行和多行文本的限制。通过设置maxWidth和maxLine参数来控制文本宽度和行数，以达到理想的裁剪效果。同时建议在裁剪内容前为容器添加title属性，以便用户查看完整信息。

摘要由CSDN通过智能技术生成

在网页端编辑文本的时候，出于设计要求，有时会出现需要进行多行文本隐藏的要求。但是css的overflow:ellipsis;只能满足但行文本超出容器时的隐藏，这时候就要用到JS来进行操作，jquery.ellipsis.js是一个基于Jquery的多行文本长度限制插件（需要jQuery的版本在1.7.0之上）。

jquery.ellipsis.js的使用非常简单，先在页面引入所需的JS文件：

<script src="js/web/jquery-1.10.2.min.js"></script>
<script src="js/web/jquery-ellipsis.js"></script>

初始化完成之后在JS文件中设定：

（1）控制单行文本时：

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

红豆灬

关注关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

多行文本溢出省略ellipsis...css/scss/js方法全总结

muzilanlan的专栏

02-19

1103

多行显示并在最后一行截断文字？ ---text-overflow基本知识请看上篇文章：text-overflow: ellipsis;什么时候可能不生效？单行文字我们为了能够截断文字，使用了 white-space: nowrap; // 强制文本在一行显示如果我确实有多行并在最后一行截断文字显示的需求呢？怎么实现？方法1 -Webkit-line-clamp property 优点: 最...

jQuery文字溢出显示省略号插件.zip

07-04

jQuery文字溢出显示省略号插件是一款基于dotdotdot.js插件实现的单行多行文本溢出显示省略号

1 条评论您还未登录，请先登录后发表或查看评论

js超过的文字用省略号显示

最新发布

zhangliwen1101的博客

08-26

468

在样式里加宽度whith属性来兼容部分浏览，用white-space:nowrap时，不会因为超出容器宽度而发生换行（限制不换行）；overflow: hidden，隐藏超出（宽度）的内容（为了让内容不撑开容器，显示到外面）；text-overflow:ellipsis，来让其在后面添加上省略号（为了让用户知道，这里的内容隐藏了部分）；1、文字超出一行，省略超出部分，显示’…2、多行文本溢出显示省略号。

Ellipsis.js-用于处理复杂多行省略号的纯Javascript库-JavaScript开发

05-26

Ellipsis.js Ellipsis.js是一个纯Javascript库，用于在一些复杂的DOM元素（例如多行div或带有子元素（链接，跨度等）的元素）上添加省略号。该库是完全响应式的，可在所有主要版本上使用。Ellipsis.js Ellipsis.js是一个纯Javascript库，用于在一些复杂的DOM元素（例如多行div或带有子元素（链接，span等）的元素）上添加省略号。该库具有完全响应能力，可在所有主要浏览器上使用，并尝试高度可配置。它也非常轻巧，缩小后的大小约为4kb。演示：https://glinford.github.io/ellipsis.js/安装：Bower bower安装ellipsis.js NPM npm安装ellipsis.js或…git clone https://github.com/glinfo

[开源]jquery.ellipsis根据宽度(不是字数)进行内容截断，支持多行内容

weixin_34074740的博客

05-15

213

jquery.ellipsis 自动计算内容宽度（不是字数）截断，并加上省略号，内容不受中英文或符号限制。如果根据字数来计算的话，因为不同字符的宽度并不相同，比如l和W，特别是中英文，最终内容宽度会有很大的差异。 jquery.ellipsis.js 依赖jquery,使用方式 $(dom).ellipsis({maxWidth:120,maxLine:2}); maxWidth，...

Ellipsis – Jquery Ellipsis Plugin

12-11

这个插件允许缩短您的文字，如果它很长的话。原来的文本可以通过鼠标悬停在缩短中看到的一样。这是一个简单但非常有用的插件。

多行文本超出 JS省略号...

HTMl5自由者

06-20

2751

(function($) { $(".first-button").on("click", function(event){ $(".first-text").ellipsis(200); $(this).hide(); }); })(jQuery); (function($) { $.fn.ellips

Ellipsisjs纯Javascript库来处理多行省略号

08-12

Ellipsis.js - 纯Javascript库来处理多行省略号

移动端的text-overflow多行文本溢出显示省略号(…)

12-10

在移动端，`text-overflow: ellipsis` 属性常用于单行文本溢出时显示省略号，但其本身并不支持多行文本的处理。本文将探讨如何在不同场景下实现多行文本溢出显示省略号的效果。首先，对于基于WebKit的浏览器（如...

【mark】单/多行文本内容溢出显示省略号…

01-07

一种常见的做法是当文本超出指定区域时显示省略号（...），以此来告知用户这部分内容被截断了。本文将详细介绍如何在不同场景下实现单行或多行文本内容溢出显示省略号的功能。 ### 一、基本概念 #### 1.1 溢出显示...

jquery-ellipsis:[已弃用] 支持多行省略号

06-19

此插件不再维护 jQuery 省略号 支持多行省略号 入门下载或。用法适合一条线 $('#target').ellipsis(); 在两条或多条线的情况下适合两条线 $('#target').ellipsis({ row: 2 }); 更改省略号 $('#target').ellipsis({ row: 2, char: '**' }); 只包含完整的单词（删除末尾的单词片段） $('#target').ellipsis({ row: 2, onlyFullWords: true }); 回调函数 $('#target').ellipsis({ callback: function() { console.log($(this).text()); } }); 中间位置省略号 $('#target'

jquery.ellipsis:jQuery 的省略号插件 (MIT)

06-20

jquery.ellipsis - jQuery 的省略号插件 jquery.ellipsis 可以使用省略号 (...) 或其他一些标记来隐藏内容。单击后，它将显示其余内容。

ellipse-js:一个用于椭圆拟合JavaScript库

05-08

椭圆js 一个用于椭圆拟合JavaScript库例子本示例计算点集(0,0), (1,0), (0,2), (2,1), (2,4)的最佳拟合椭圆的方程式 var ellipse = new Ellipse(); ellipse.setFromPoints([{x:0, y:0}, {x:1, y:0}, {x:0, y:2}, {x:2, y:1}, {x:2, y:4}]); ellipse.printEquation(); 打印+0.743x^2 -0.557xy +0.371y^2 -0.743x -0.743y +0 = 0 可以使用ellipse.a ， ellipse.b ， ellipse.c ， ellipse.d ， ellipse.e独立访问每个组件。

javascript超过容器后显示省略号效果的方法(兼容一行或者多行)

10-21

- 根据指定的行数和行高计算应该截取的文本长度，并在超出时显示省略号。 JavaScript实现的组件`MultiEllipsis`支持两种方式截取文本： - 通过字符长度截取。例如，初始化时设置`isCharLimit`为`true`和`maxLength...

js多行溢出省略号

weixin_43061527的博客

02-29

226

；一个文本溢出省略号的js方法，无论内容是什么 strSub(v){ let str = v; let count = 0; var p = document.createElement("p"); //添加一个标签和要显示的标签的所有样式一样； p.style=`bo...

js实现多行溢出省略号

w96098的博客

04-15

814

；一个文本溢出省略号的js方法，无论内容是什么 strSub(v){ let str = v; let count = 0; var p = document.createElement("p"); //添加一个标签和要显示的标签的所有样式一样； p.style=`box-sizing: border-box; padding: 8px 1

mlellipsis.js-实现多行文字溢出隐藏显示省略号

923723914

10-12

234

超出容器部分文字做省略，这是基本写前端代码都会遇到的问题。某些位置为了表现完美不额外加滚动条，都会要求多出的部分作省略，例如文章简介”今天天气真的好…”，文本之后部分点击进入详情页才能看到，超出多余的用”…”省略。然而，一般这些简介都是用后台语言去作处理，例如只显示前140字等，如何用前端代码实现？你会想到用css的overflow:hidden;white-space:nowra...

jquery.ellipsis.js段落超出省略号插件

dgce32897的博客

03-28

175

jquery.ellipsis.js段落超出省略号插件为了实现在段落尾部超出文字替换为省略号，自己写的插件，并作了简单的优化。下面给出脚本演示页面及注释，在此之前介绍一下插件参数 1.lineNum：数字。限制段落的行数 2.english：布尔。英文模式字符偏小，需扩大筛选空间，实际源码中是通过此参数修改并覆盖OP_NUM； 3.OP_NUM: 数字。优化系数，一...

多行文本超出显示省略号效果怎么实现

07-16

要实现多行文本超出显示省略号的效果，可以使用CSS的属性`text-overflow`和`-webkit-line-clamp`。首先，给文本容器（例如`<div>`或`<p>`元素）设置以下样式： ```css .container { overflow: hidden; text-...