js封装的一行半显示省略号。(字数自由控制)
$(function() {
//控制一行半隐藏
(function ($) {
$.fn.displayPart = function (opts) {
$(this).each(function () {
displayPart($(this), opts);
});
}
function displayPart($el, opts) {
var defaults = {
displayLength: 50 //具体的想要显示的字数
}
this.Settings = $.extend(defaults, opts);
if (this.Settings.displayLength == defaults.displayLength && $el.data("textcount")) {
this.Settings.displayLength = $el.data("textcount");
}
var displayLength = this.Settings.displayLength;
var text = $el.text();
if (!text) return "";
var result = "";
var count = 0;
for (var i = 0; i < displayLength; i++) {
var _char = text.charAt(i);
if (count >= displayLength) break;
if (/[^x00-xff]/.test(_char)) count++; //双字节字符,//[u4e00-u9fa5]中文
result += _char;
count++;
}
if (result.length < text.length) {
result += "...";
}
$el.text(result);
}
})(jQuery);
$("p").displayPart();
//控制一行半隐藏
})
js封装的一行半显示省略号。(字数自由控制)的更多相关文章
- js实现多行文本超出一定字数显示省略号功能
最近项目中遇到了一个关于超出一定字数用省略号显示的问题,其实这种形式很常见,公司简介.产品介绍啊里面都可能会用到,一行文字显示省略号很容易,多行就得想点办法了.在经过查阅.整理之后,我也算是实现了这个 ...
- 11、多行文本最后一行显示省略号并截取文本字数(vue)
1.首先通过css实现多行文本显示省略号: { height: 45px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-li ...
- js控制文本显示的字数,超出显示省略号
在css中我们说了用css控制文本显示几行,超出用省略号,但这个办法是要完全占满一整行的,偏偏就是有UI设计师就不这么干,是不是很想打他,哈哈哈,我不会的时候都这样子在心里骂设计师的,这么久那么爱搞特 ...
- js 控制超出字数显示省略号
//多余显示省略号 function wordlimit(cname, wordlength) { var cname = document.getElementsByClassName(cname) ...
- javascript超过容器后显示省略号效果(兼容一行或者多行)
javascript超过容器后显示省略号效果 在实际的项目中,由于文字内容的长度不确定性和页面布局的固定性,难免会出现文字内容超过div(或其他标签,下同)区域的情况,此时比较好的做法就是 ...
- CSS控制文字只显示一行 超出部分显示省略号
<p style="width: 120px; height: 50px; border: 1px solid blue; white-space: nowrap; over ...
- CSS控制文字只显示一行,超出部分显示省略号
<p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"&g ...
- Div内部的内容超出部分显示省略号(仅仅只有一行内容)
效果如下:
- CSS和JS实现单行、多行文本溢出显示省略号(该js方法有问题不对)
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
随机推荐
- CodeForces A. Many Equal Substrings
http://codeforces.com/contest/1029/problem/A You are given a string tt consisting of nn lowercase La ...
- shit element ui
shit element ui element ui & select change event demo https://element.eleme.io/#/en-US/component ...
- InfluxDB执行语句管理(query management)
本文属于<InfluxDB系列教程>文章系列,该系列共包括以下 17 部分: InfluxDB学习之InfluxDB的基本概念 InfluxDB学习之InfluxDB的基本操作 Influ ...
- 《c程序设计语言》读书笔记-第二个字符串任意一个在第一个字符串出现的位置,未出先返回-1
#include <stdio.h> #include <string.h> #define Num 1000 int main() { int c,i,j = 0,m = 0 ...
- 7月14号day6总结
今天学习过程和总结 IOC和DIO IOC相当于一个容器,在容器中加注解.接口存在意义依赖注入.4个注解都行,依赖注入只能发生在IOC容器里, pring IOC 容器可以管理Bean 的生命周期,S ...
- mac 安装 navicat premium11.2.1400 破解版
前言: 在 Mac 系统下 安装 navicat for mysql 时,遇到注册码的问题,适用了很多破解下载,都没有成功,现找到一篇特此记录下. Mac 下一款实用的数据库管理工具--Navicat ...
- Linux : 使用 lsof 恢复文件
用 lsof 命令在某种程度上可以恢复删除的文件, 前提是这个文件被正在运行的进程占用. 比如: 日志文件, 配置文件. lsof 恢复文件 查找需要恢复的文件和占用文件的进程 PID lsof |g ...
- 也来写写基于单表的Orm(使用Dapper)
前言 这两天看园子里有个朋友写Dapper的拓展,想到自己之前也尝试用过,但不顺手,曾写过几个方法来完成自动的Insert操作.而对于Update.Delete.Select等,我一直对Diction ...
- 让vim的在输入模式下现实光标不同
前几天用过苹果之后,发现vim中在插入模式下与命令模式下光标形状不同,根据光标形状就可以快速确认所在的模式,很方便,后来查了很多资料,一直查到官方的wiki也没有搞定,后来,终于搞定,现记录如下:我的 ...
- [置顶] Linux 虚拟地址与物理地址的映射关系分析【转】
转自:http://blog.csdn.net/ordeder/article/details/41630945 版权声明:本文为博主(http://blog.csdn.net/ordeder)原创文 ...