$(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封装的一行半显示省略号。(字数自由控制)的更多相关文章

  1. js实现多行文本超出一定字数显示省略号功能

    最近项目中遇到了一个关于超出一定字数用省略号显示的问题,其实这种形式很常见,公司简介.产品介绍啊里面都可能会用到,一行文字显示省略号很容易,多行就得想点办法了.在经过查阅.整理之后,我也算是实现了这个 ...

  2. 11、多行文本最后一行显示省略号并截取文本字数(vue)

    1.首先通过css实现多行文本显示省略号: { height: 45px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-li ...

  3. js控制文本显示的字数,超出显示省略号

    在css中我们说了用css控制文本显示几行,超出用省略号,但这个办法是要完全占满一整行的,偏偏就是有UI设计师就不这么干,是不是很想打他,哈哈哈,我不会的时候都这样子在心里骂设计师的,这么久那么爱搞特 ...

  4. js 控制超出字数显示省略号

    //多余显示省略号 function wordlimit(cname, wordlength) { var cname = document.getElementsByClassName(cname) ...

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

    javascript超过容器后显示省略号效果       在实际的项目中,由于文字内容的长度不确定性和页面布局的固定性,难免会出现文字内容超过div(或其他标签,下同)区域的情况,此时比较好的做法就是 ...

  6. CSS控制文字只显示一行 超出部分显示省略号

         <p style="width: 120px; height: 50px; border: 1px solid blue; white-space: nowrap; over ...

  7. CSS控制文字只显示一行,超出部分显示省略号

    <p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"&g ...

  8. Div内部的内容超出部分显示省略号(仅仅只有一行内容)

    效果如下:

  9. CSS和JS实现单行、多行文本溢出显示省略号(该js方法有问题不对)

    如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...

随机推荐

  1. HTML快速入门

    我们经常上网浏览网页,来获取资讯.可网页是什么呢?它又是如何编写出来的呢? 网页又叫Web页面,我们经常可以在网页上看到文字.图片.视频等.我们所要说的HTML(超文本标记语言)就是构成网页文档的主要 ...

  2. ThreadPoolExecutor源码解析

    LZ目前正在做一个批量生成报表的系统,需要定时批量生成多张报表,便考虑使用线程池来完成.JDK自带的Executors工具类只提供创建固定线程和可伸展但无上限的两个静态方法,并不能满足LZ想自定制线程 ...

  3. linux shell常用语法

    特殊变量 $0 当前脚本的文件名$n 传递给脚本或函数的参数.n 是一个数字,表示第几个参数.例如,第一个参数是$1,第二个参数是$2.$# 传递给脚本或函数的参数个数.$* 传递给脚本或函数的所有参 ...

  4. BZOJ4652 [Noi2016]循环之美 【数论 + 莫比乌斯反演 + 杜教筛】

    题目链接 BZOJ 题解 orz 此题太优美了 我们令\(\frac{x}{y}\)为最简分数,则\(x \perp y\)即,\(gcd(x,y) = 1\) 先不管\(k\)进制,我们知道\(10 ...

  5. 导入android源码中的APP源码到eclipse

    导入android源码中的APP源码到eclipse 一般最简单的办法就是创建新的android工程,选择create project from existing source选项,直接导入源码就OK ...

  6. angular.fromJson(json)的简单示例

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. Python之面向对象:类的内置方法

    1.def __add__(self,other): c1+c2 两个实例的加法操作就是执行__add__()方法 2.__str__(self): print一个实例的时候,执行的是__str__( ...

  8. Windows转移FSMO角色

    转移 FSMO 角色若要使用 Ntdsutil 实用工具转移 FSMO 角色,请按照下列步骤操作:1.登录到基于 Windows 2000 Server 或基于 Windows Server 2003 ...

  9. iphone上做webapp时总会识别一串数字为手机号码并变黑显示

    iphone上网页里总会识别一串数字为手机号码并变黑显示 只需要在head里加上一个特别的meta即可 <meta name="format-detection" conte ...

  10. 从Jetty、Tomcat和Mina中提炼NIO构架网络服务器的经典模式

    如何正确使用NIO来构架网络服务器一直是最近思考的一个问题,于是乎分析了一下Jetty.Tomcat和Mina有关NIO的源码,发现大伙都基于类似的方式,我感觉这应该算是NIO构架网络服务器的经典模式 ...