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

jquery.ellipsis

自动计算内容宽度(不是字数)截断,并加上省略号,内容不受中英文或符号限制。

如果根据字数来计算的话,因为不同字符的宽度并不相同,比如l和W,特别是中英文,最终内容宽度会有很大的差异。

jquery.ellipsis.js 依赖jquery,使用方式

$(dom).ellipsis({maxWidth:120,maxLine:2});

maxWidth,最大宽度 maxLine,最大亮度,标题啊什么的显示通常需要支持多行内容显示。默认为1

jquery.ellipsis.unobtrusive.js 依赖jquery.ellipsis.js,非必须项,这个是用来支持用data-标签来控制行为 使用方式:

<p data-ellipsis="true" data-ellipsis-max-width="200" data-ellipsis-max-line="2">...
</p>

引入这个js即可自动根据元素上的data属性来处理,不需要写额外的脚本

源码及Demo下载:https://github.com/thinhunan/jquery.ellipsis

转载于:https://www.cnblogs.com/think/archive/2013/05/15/jquery_ellipsis.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/274248.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

不安装游戏apk直接启动法

原文地址&#xff1a;http://blog.zhourunsheng.com/2011/09/%E6%8E%A2%E7%A7%98%E8%85%BE%E8%AE%AFandroid%E6%89%8B%E6%9C%BA%E6%B8%B8%E6%88%8F%E5%B9%B3%E5%8F%B0%E4%B9%8B%E4%B8%8D%E5%AE%89%E8%A3%85%E6%B8%B8%E6%88%8Fapk%E7%9B%B4%E6%8E%A5%E5%90%AF%E5%8A%A8%E6%B3%95…

Android客户端打包方案分享

基本介绍 Android应用的自动化打包是应用持续集成以及多渠道发布的基础。当前Android客户端自动化打包的主要有两种方式&#xff0c;Ant和Maven。两种方式本质上都是调用Android SDK里面提供的工具&#xff0c;不过各自有各自的特点。 1. Ant脚本 好处&#xff1a;开发成本较低…

您的UX库不只是书籍

hp ux 密码不过期Looking back on past self, one thing I wish I’d realised is the importance of keeping notes of everything.回顾过去的自我&#xff0c;我希望我意识到的一件事是记录所有事情的重要性。 This means everything interesting I’ve read and written; e…

交互设计精髓_设计空间的精髓

交互设计精髓重点 (Top highlight)什么是空间&#xff1f; (What is Space?) Space is the dimension of height, depth and width within which all things exist and move. Space or Empty space or White space or Negative space are alias given to describe intensional…

ux和ui_UI和UX设计人员的47个关键课程

ux和ui重点 (Top highlight)This is a mega-list of the most critical knowledge for UI, UX, interaction, or product designers at any level.这是所有级别的UI&#xff0c;UX&#xff0c;交互或产品设计人员最关键的知识的大清单。 Many of these lessons are also appli…

深入理解Java内存模型(七)——总结

处理器内存模型 顺序一致性内存模型是一个理论参考模型&#xff0c;JMM和处理器内存模型在设计时通常会把顺序一致性内存模型作为参照。JMM和处理器内存模型在设计时会对顺序一致性模型做一些放松&#xff0c;因为如果完全按照顺序一致性模型来实现处理器和JMM&#xff0c;那么…

沉浸式ui设计_有助于沉浸的视频游戏UI —武器轮

沉浸式ui设计Many action-adventure games rely on the feeling of thrills via bullets, fire, grenade, more bullets, and gigantic booms. The way to enable all these is to offer a massive arsenal, from machetes to assault rifles all the way till bazookas.许多动…

ux设计师薪水_客户现在也是UX设计师

ux设计师薪水Some of you probably know by now, I’m not too fond of the monster the UX industry has become. It’s overblown, overcomplicated and often dishonest towards the clients. It’s also in itself undefined. (where is the E in Experience?)你们中的某些…

分步表单_角色创建分步指南

分步表单The first thing most of us designers are taught is the concept of personas and the necessity of them when it comes to UX and product design. However, knowing is different from applying and it can be difficult to know where to begin when we’re aske…

svg配合css3动画_带有Adobe Illustrator,HTML和CSS的任何网站的SVG动画

svg配合css3动画A top trend in web design for 2020 is the increased use of SVG animations on web pages and in logo design. In this article, we will implement a simple and straight forward method to create relatively complex animation. We will use Adobe Illu…

基于pt100温度计仿真_基于8pt网格的设计系统

基于pt100温度计仿真重点 (Top highlight)This article is the 2nd in a two part series — to the previous chapter in which I demonstrate how to establish an 8pt grid.本文是该系列文章的第二部分 &#xff0c;这是上一章 的第二部分 &#xff0c;在上一章中&#xff0…

利用 k8s 建立软件商店_为企业建立应用商店

利用 k8s 建立软件商店It’s June 2019. I’m sitting in a conference room in Research Triangle Park in North Carolina. At the end of the table are the two executives that have been tapped to lead a new endeavor on behalf of IBM’s $34 billion acquisition of …

苹果复兴_类型复兴的故事:来自Type West的经验教训

苹果复兴Last Fall, I began the 去年秋天&#xff0c;我开始 在旧金山的Type West program at the Letterform档案库中Letterform Archive in San Francisco. For those of you who don’t know, the Letterform Archive is creative heaven — a type nerd’s letter art co…

C#调用ATL COM

作者&#xff1a;朱金灿 来源&#xff1a;http://blog.csdn.net/clever101 简单介绍C#程序如何调用ATL编写的COM组件。 首先新建一个ATL工程&#xff0c;具体如下&#xff1a; 1. 填写工程名称和路径&#xff0c;如下图&#xff1a; 2. 选择工程的服务器类型为动态链接库&a…

浪潮世科和浪潮软件什么关系_社交图形浪潮

浪潮世科和浪潮软件什么关系Nowadays, the cornucopia of graphics seems like a given. However, it was not so long ago that infographics were scarce and lived in closed ecosystems. The majority of graphics were published in newspapers, magazines, or books, and…

PHP图形图像的典型应用 --常用图像的应用(验证码)

php生成动态的验证码&#xff0c;是php防止恶意登陆或者注册等常规手段-废话不多说&#xff0c;直接看例子。&#xff08;只是一个简单的应用&#xff0c;如果要安全或者更复杂的&#xff0c;请期待我以后的文章&#xff09; PHP生成验证码核心文件 (checks.php): <?php/*成…

写saas创业的书_我在SaaS创业公司担任UX设计师的第一个月中学到的三件事

写saas创业的书I recently transitioned from being a copywriter at an ad agency to a UX Designer at a SaaS startup. To add more multidisciplinary skills into the mix, I graduated with a Bachelor in Accountancy.我最近从一名广告代理商的撰稿人过渡到了SaaS初创公…

ui项目答辩中学到了什么_我在UI设计9年中学到的12件事

ui项目答辩中学到了什么重点 (Top highlight)I know these can seem a bit clich but I will try to explain everything from my own experience.我知道这些内容似乎有些陈词滥调&#xff0c;但我会尝试根据自己的经验来解释所有内容。 第一名 (No.1 Never assume) The first…

ux的重要性_UX中清晰的重要性

ux的重要性重点 (Top highlight)Times, since the very first occurrences of web design in the 90’s, have changed a lot design-wise. The particular technology and its applications got more stable. Human-computer interaction (HCI) was deeply researched, design…

可靠消息最终一致性设计_如何最终启动您的设计产品组合

可靠消息最终一致性设计It’s not a secret that most designers procrastinate on their portfolios whether it is to update them or to create them in the first place.大多数设计师在更新产品组合时还是拖延产品组合并不是秘密。 首先创建它们 。 Hopefully, by the e…