jQuery控制控件文本的长度的操作方法


Posted in Javascript onDecember 05, 2016

在Web项目开发中,有时候会碰到这样一个问题,控件被文本内容撑爆了,但是怎么控制控件文本的的内容呢?可能有的人会用Javascript中的substring对控件显示的文本进行控件,但由于字母大小写,汉字,其它语言等每个字符的大小是不一样的,这导致了同样是substring(0, 10),有的内容小,有的内容大,而想要使用CSS控制控件的宽度时,有时候并不起作用,除非你很精通CSS,否则很难通过CSS控制控件中的文本内容,下面的方法可以解决这个问题。

HTML内容,h2中的文本通过jQuery控制:

<h2 class="test"></h2>

例如,h2的内容为这是一个测试内容,更多其它内容请查看作者博客!,但控件不够长,直接放会撑爆控件,想要显示部分内容,剩下的内容用...表示。如果h2控件的样式已由CSS控制,则可以这样做:

HTML内容修改,span控件的CSS样式没有被控制:

<h2 class="test"><span class="test_span"></span></h2>

jQuery写法为:

var str = '这是一个测试内容,更多其它内容请查看作者博客!';
var threshold = 100;
for (var i = 1; i < str.length; i++) {
var subStr = str.substring(0, i);
$('.test_span').text(subStr);
if($('.test_span').width() > threshold) {
$('.test_span').text(subStr + '...');
break;
}
}

上面的做法是根据控件的当前宽度来决定显示的字符数,这样既不会撑爆控件,又可以最大程度的显示字符串。

以上所述是小编给大家介绍的jQuery控制控件文本的长度,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS 添加网页桌面快捷方式的代码详细整理
Dec 27 Javascript
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
Apr 02 Javascript
图文详解JavaScript的原型对象及原型链
Aug 02 Javascript
使用Ajax与服务器(JSON)通信实例
Nov 04 Javascript
js鼠标移动时禁止选中文字
Feb 19 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
bootstrap实现二级下拉菜单效果
Nov 23 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
May 13 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
Aug 01 Javascript
VUE安装使用教程详解
Jun 03 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
浅析Ajax语法
Dec 05 #Javascript
jQuery的事件预绑定
Dec 05 #Javascript
微信小程序 UI布局常用技巧整理总结
Dec 05 #Javascript
深入理解vue.js双向绑定的实现原理
Dec 05 #Javascript
微信小程序 底部导航栏目开发资料
Dec 05 #Javascript
基于js实现的限制文本框只可以输入数字
Dec 05 #Javascript
AJAX和jQuery动态加载数据的实现方法
Dec 05 #Javascript
You might like
php 随机数的产生、页面跳转、件读写、文件重命名、switch语句
2009/08/07 PHP
thinkphp框架page类与bootstrap分页(美化)
2017/06/25 PHP
php-msf源码详解
2017/12/25 PHP
IE 上下滚动展示模仿Marquee机制
2009/12/20 Javascript
jquery下将选择的checkbox的id组成字符串的方法
2010/11/28 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
2013/03/04 Javascript
JS生成不重复随机数组的函数代码
2014/06/10 Javascript
JavaScript中的substr()方法使用详解
2015/06/06 Javascript
JS更改select内option属性的方法
2015/10/14 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
2016/07/07 Javascript
深入浅析javascript中的作用域(推荐)
2016/07/19 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
2017/07/05 Javascript
Vue2仿淘宝实现省市区三级联动
2020/04/15 Javascript
JS图片懒加载的优点及实现原理
2020/01/10 Javascript
[03:14]2014DOTA2西雅图国际邀请赛 EG战队巡礼
2014/07/07 DOTA
[03:42]2016国际邀请赛中国区预选赛首日现场玩家采访
2016/06/26 DOTA
Python+Socket实现基于TCP协议的客户与服务端中文自动回复聊天功能示例
2017/08/31 Python
python如何为被装饰的函数保留元数据
2018/03/21 Python
python3 写一个WAV音频文件播放器的代码
2019/09/27 Python
Python3.7 pyodbc完美配置访问access数据库
2019/10/03 Python
python可视化实现KNN算法
2019/10/16 Python
python实现LRU热点缓存及原理
2019/10/29 Python
Python中使用gflags实例及原理解析
2019/12/13 Python
python 生成器需注意的小问题
2020/09/29 Python
英国领先的酒类网上商城:TheDrinkShop
2017/03/16 全球购物
Blue Nile台湾:钻石珠宝商,订婚首饰、结婚戒指和精品首饰
2017/11/24 全球购物
No7 Beauty美国官网:英国国民护肤品牌
2019/10/31 全球购物
公司周年庆活动方案
2014/08/25 职场文书
戒毒悔改检讨书
2014/09/21 职场文书
作风整顿个人剖析材料
2014/10/06 职场文书
化验室岗位职责
2015/02/14 职场文书
2015年项目工作总结
2015/04/29 职场文书
小学体育队列队形教学反思
2016/02/16 职场文书
Python中seaborn库之countplot的数据可视化使用
2021/06/11 Python
OpenCV绘制圆端矩形的示例代码
2021/08/30 Python
浅谈 JavaScript 沙箱Sandbox
2021/11/02 Javascript