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 相关文章推荐
自动生成文章摘要的代码[JavaScript 版本]
Mar 20 Javascript
javascript中的107个基础知识收集整理 推荐
Mar 29 Javascript
from 表单提交返回值用post或者是get方法实现
Aug 21 Javascript
jQuery实现的一个自定义Placeholder属性插件
Aug 11 Javascript
JQuery CheckBox(复选框)操作方法汇总
Apr 15 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
Jul 14 Javascript
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
JS中使用media实现响应式布局
Aug 04 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
Nov 22 Javascript
10个在JavaScript开发中常遇到的BUG
Dec 18 Javascript
使用apifm-wxapi快速开发小程序过程详解
Aug 05 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
Oct 13 Javascript
浅析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
域名查询代码公布
2006/10/09 PHP
php的curl实现get和post的代码
2008/08/23 PHP
PHP 实现explort() 功能的详解
2013/06/20 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
jQuery数据缓存功能的实现思路及简单模拟
2013/05/27 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
2013/06/08 Javascript
鼠标焦点离开文本框时验证的js代码
2013/07/19 Javascript
JS 有趣的eval优化输入验证实例代码
2013/09/22 Javascript
Javascript:为input设置readOnly属性(示例讲解)
2013/12/25 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
2014/04/10 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
2015/06/05 Javascript
JavaScript操作HTML DOM节点的基础教程
2016/03/11 Javascript
jQuery EasyUI结合zTree树形结构制作web页面
2017/09/01 jQuery
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
2019/05/07 Javascript
详解uniapp的全局变量实现方式
2021/01/11 Javascript
[01:46]辉夜杯—打造中国DOTA新格局
2015/12/25 DOTA
[00:12]DAC2018 天才少年转战三号位,他的SOLO是否仍如昔日般强大?
2018/04/06 DOTA
python 使用turtule绘制递归图形(螺旋、二叉树、谢尔宾斯基三角形)
2019/05/30 Python
Django Haystack 全文检索与关键词高亮的实现
2020/02/17 Python
Python3 Tensorlfow:增加或者减小矩阵维度的实现
2020/05/22 Python
tensorflow 20:搭网络,导出模型,运行模型的实例
2020/05/26 Python
使paramiko库执行命令时在给定的时间强制退出功能的实现
2021/03/03 Python
台湾线上百货零售购物平台:friDay购物
2017/08/18 全球购物
师范应届生语文教师求职信
2013/10/29 职场文书
酒店员工检讨书
2014/02/18 职场文书
小学教师寄语大全
2014/04/03 职场文书
道德之星事迹材料
2014/05/03 职场文书
给市场的环保建议书
2014/05/14 职场文书
学校节能减排倡议书
2014/05/16 职场文书
学校领导班子群众路线整改措施
2014/09/16 职场文书
干部作风整顿个人剖析材料
2014/10/06 职场文书
学校实习推荐信
2015/03/27 职场文书
暑期工社会实践报告
2015/07/13 职场文书
世界无敌的ICOM IC-R9500宽频接收机
2022/03/25 无线电