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 相关文章推荐
学习ExtJS border布局
Oct 08 Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
Jan 11 Javascript
JQuery的自定义事件代码,触发,绑定简单实例
Aug 01 Javascript
浏览器窗口加载和大小改变事件示例
Feb 27 Javascript
Jquery使用css方法改变样式实例
May 18 Javascript
vue.js移动端tab组件的封装实践实例
Jun 30 Javascript
解决低版本的浏览器不支持es6的import问题
Mar 09 Javascript
js正则相关知识点专题
May 10 Javascript
element-ui中的select下拉列表设置默认值方法
Aug 24 Javascript
vue项目接口域名动态获取操作
Aug 13 Javascript
微信小程序picker组件两列关联使用方式
Oct 27 Javascript
vue 数据双向绑定的实现方法
Mar 04 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 版本]
2007/03/20 PHP
phpmail类发送邮件函数代码
2012/02/20 PHP
php牛逼的面试题分享
2013/01/18 PHP
CodeIgniter框架URL路由总结
2014/09/03 PHP
Nginx下配置codeigniter框架方法
2015/04/07 PHP
浅谈php中的循环while、do...while、for、foreach四种循环
2016/11/05 PHP
js防止表单重复提交的两种方法
2013/09/30 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
2013/12/23 Javascript
浅析JavaScript事件和方法
2015/02/28 Javascript
了解Javascript的模块化开发
2015/03/02 Javascript
JavaScript数组方法总结分析
2016/05/06 Javascript
新入门node.js必须要知道的概念(必看篇)
2016/08/10 Javascript
总结AngularJS开发者最常犯的十个错误
2016/08/31 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
2017/08/24 jQuery
浅谈webpack+react多页面开发终极架构
2018/11/11 Javascript
webpack.DefinePlugin与cross-env区别详解
2020/02/23 Javascript
JS使用Chrome浏览器实现调试线上代码
2020/07/23 Javascript
Vue+element+cookie记住密码功能的简单实现方法
2020/09/20 Javascript
[59:07]海涛为你详解DOTA2新版本“贤哲秘契”
2014/11/22 DOTA
python监控网卡流量并使用graphite绘图的示例
2014/04/27 Python
Python Property属性的2种用法
2015/06/21 Python
python创建文件备份的脚本
2018/09/11 Python
使用Python进行体育竞技分析(预测球队成绩)
2019/05/16 Python
女方回门宴答谢词
2014/01/14 职场文书
应届毕业生应聘自荐信范文
2014/02/26 职场文书
实验心得体会
2014/09/05 职场文书
小学感恩节活动策划方案
2014/10/06 职场文书
2014幼儿教师个人工作总结
2014/12/03 职场文书
乡镇安全生产月活动总结
2015/05/08 职场文书
工作时间证明
2015/06/15 职场文书
同意报考证明
2015/06/17 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书
windows下快速安装nginx并配置开机自启动的方法
2021/05/11 Servers
sql server删除前1000行数据的方法实例
2021/08/30 SQL Server
Mysql排序的特性详情
2021/11/01 MySQL
Win11更新失败并提示0xc1900101
2022/04/19 数码科技