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 ...
随机推荐
- qemu中是怎么模拟的新的设备
kvm_cpu_exec 和demo中演示的一样
- CSLM 配置粗解
CSLM工具(continuous space language model toolkit)用于训练NNLM,支持SRILM.KENLM(默认)语言模型工具,CUDA加速,CSTM统计机器翻译. 本 ...
- 【ZBH选讲·拍照】
[问题描述] 假设这是一个二次元.LYK召集了n个小伙伴一起来拍照.他们分别有自己的身高Hi和宽度Wi.为了放下这个照片并且每个小伙伴都完整的露出来,必须需要一个宽度为ΣWi,长度为max{Hi}的相 ...
- bzoj2441 [中山市选2011]小W的问题(debug中)
2441: [中山市选2011]小W的问题 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 487 Solved: 186[Submit][Statu ...
- 寻宝游戏(bzoj 3991)
Description 小B最近正在玩一个寻宝游戏,这个游戏的地图中有N个村庄和N-1条道路,并且任何两个村庄之间有且仅有一条路径可达.游戏开始时,玩家可以任意选择一个村庄,瞬间转移到这个村庄,然后可 ...
- [fjwc2015]Screen [从hzw神犇那里扒来的题]
[题目描述] 码农有一块超新星屏幕,它有N个像素点,每个像素点有亮度和灰度两个参数,记为I和H, 范围都是0~32000. 一天,码农突发奇想,想知道哪个点比较容易亮瞎眼睛.为此,他定义了一个瞎眼指数 ...
- java IO的字节流和字符流及其区别
1. 字节流和字符流的概念 1.1 字节流继承于InputStream OutputStream, 1.2 字符流继承于InputStreamReader OutputStre ...
- ListView控件的不为人知的秘密
使用ListView控件展示数据 1.图像列表控件(ImageList控件) 图像列表控件(ImageList控件)是含有图像对象的集合,可以通过索引或关键字引用该集合的每个对象,ImageList控 ...
- 华为上机测试题(表达式运算-java)
PS:自己写的,自测试OK,供大家参考. 补充:数据解析的过程,评论区有更好的处理方式,可参考. /* * 输入一个表达式,3*8+7-2,没有括号 输出结果 */ /* 本程序暂不考虑容错处理 */ ...
- python每日一类(2):platform
根据官方文档的解释(https://docs.python.org/3.5/library/platform.html#module-platform): 学习其他人的代码如下: # python p ...