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 Round #515 Div.3 A. Vova and Train
http://codeforces.com/contest/1066/problem/A Vova plans to go to the conference by train. Initially, ...
- Tomcat源码浅析
最近在学习tomcat源码,算是把tomcat的整个流程梳理通了. 从上图来看,tomcat把模块化使用到了极致,配合组件生命周期的管理,让代码看起来结构清晰,而且很容易进行业务扩展. 1.上图的接口 ...
- bzoj2178:圆的面积并
题意:http://www.lydsy.com/JudgeOnline/problem.php?id=2178 sol :是谁.......是谁往题里下毒...... 辛普森积分,每次判断左边+右边 ...
- 追加window.onload函数
function addLoadEvent(func) { var old_onload = window.onload; if (typeof window.onload != 'function' ...
- 文件搜索工具everything
Everything是voidtools开发的一款文件搜索工具,官网描述为“基于名称实时定位文件和目录(Locate files and folders by name instantly) (“Ev ...
- Java并发笔记(二)
1. 活跃性危险 死锁(最常见) 饥饿 当线程由于无法访问它所需的资源而不能继续执行时,就发生了饥饿.引发饥饿最常见资源就是CPU时钟周期. 活锁 活锁指的是任务或者执行者没有被阻塞,由于某些条件没有 ...
- 结构型设计模式之适配器模式(Adapter)
结构 意图 将一个类的接口转换成客户希望的另外一个接口.A d a p t e r 模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作. 适用性 你想使用一个已经存在的类,而它的接口不符合你 ...
- vue-cli打包后图片路径取不到的问题
今天准备把vue-cli build 的文件发到服务器上单发现会出现图片找不到的问题 解决办法如下 修改 assetsPublicPath: './' .打开webpack.prod.conf.js, ...
- java基础练习 20
import java.util.Scanner; public class Twentieth { /*某个公司采用公用电话传递数据,数据是四位的整数,在传递过程中是加密的,加密规则如下:每位数字都 ...
- JMeter乱码问题的解决
一.JMeter返回数据是乱码 解决办法是: 在JMeter安装路径的bin目录下,以记事本打开文件jmeter.properties, 找到Sampleresult.default.encoding ...