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

在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控制控件文本的长度，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • JQuery获取文本框中字符长度的代码

    趁我写例子这点时间有两个人回答了 呵呵 刚才试验过了 看下例子吧 JS 方法: 复制代码 代码如下: <script type="text/javascript"> // 得到字符串的真实长度(双字节换算为两个单字节) function getStrActualLen(sChars) { //sChars.replace(/[^\x00-\xff]/g,"xx").length/1024+"字节"; //Math.round(sCha

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

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

  • Jquery获得控件值的三种方法总结

    一 Jquery获得服务器控件值的方法由于ASP.NET网页运行后,服务器控件会随机生成客户端id,jquery获取时候不太好操作,google了下,总结有以下3种方法: 服务器控件代码:<asp:TextBox ID="txtUserID" runat="server"></asp:TextBox> 1. $("#<%=txtUserID.ClientID%>").val(); 2. $("inpu

  • jQuery Html控件基本操作(日常收集整理)

    闲来无聊,收集总结一下jQuery常用操作,希望对新手有用. 基于jquery 1.3.2 <!--<script type="text/javascript" src="jquery/jquery-1.3.2.js"></script>--> <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js&q

  • ANGULARJS中使用JQUERY分页控件

    ANGULARJS中使用JQUERY分页控件

    首篇,不知写何物,思来想去,敬上分页控件使用方法,望共同探讨. 分页乃前端数据展现之常用功能,而在我们使用的Angular js中,原生的分页需要将数据全部取到前端后,然后再到前端分页,在大批量数据操作时并不实用.接下来,我来介绍了将一种jquery的分页控件修改为Angularjs指令的方法. 首先在web项目中引用jquery1.10.Angularjs库文件以及jq-pagination控件. 我降指令名称为custompagination,为指令添加Html样式. 然后给指令添加对应的控

  • 设置jquery UI 控件的大小方法

    如下所示: #ui-datepicker-div { font-size: 12px; } 以上这篇设置jquery UI 控件的大小方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 自己动手写的jquery分页控件(非常简单实用)

    自己动手写的jquery分页控件(非常简单实用)

    最近接了一个项目,其中有需求要用到jquery分页控件,上网也找到了需要分页控件,各种写法各种用法,都是很复杂,最终决定自己动手写一个jquery分页控件,全当是练练手了.写的不好,还请见谅,本分页控件在chrome测试过,其他的兼容性不知道怎么没时间测试呢.欢迎有同样需求的小伙伴采用,在使用过程发现有问题欢迎提出批评建议. css: @charset "utf-"; * { margin:px; padding:px; font-family:"微软雅黑"; fo

  • jquery 分页控件实现代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>jquery分页控

  • jQuery树形控件zTree使用小结

    jQuery树形控件zTree使用小结

    0 zTree简介 树形控件的使用是应用开发过程中必不可少的.zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. 0.0 zTree的特点  •最新版的zTree将核心代码按照功能进行了分割,不需要的代码可以不用加载,如普通使用只需要加载核心的jquery.ztree.core-3.5.js,需要使用勾选功能加载jquery.ztree.excheck-3.5.min.js,需要使用编辑功能加载jquery.

  • ASP.NET MVC引入JQUERY JQRTE控件

    主要步骤如下: 1,在asp.net mvc项目中引入jqrte类库,声明辅助类用于存储服务器端上载文件的信息 复制代码 代码如下: public class ViewDataUploadFilesResult { public string message { get; set; } //public int Length { get; set; } public string imagepath { get; set; } public string error { get; set; }

  • jQuery 相关控件的事件操作分解

    今天突然对他的事件产生了兴趣,先前也碰到过,也没整理,今天有空就弄一下咯. 对于控件的事件,jQuery已经提供了丰富的方法,包括绑定.一次绑定.触发等,阿拉今早看看叫一哪能用额伐,大虾路古就可以了. jQuery的绑定事件非常方便,有bind.live.one还有它帮你把一些常用的事件给单独了出来,比如控件的onclick事件,我们绑定onclick事件的时候只需要 复制代码 代码如下: $("#testButton").click(function() { alert("

随机推荐