时间：2021-06-07 08:54:59 | 栏目：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;
}
}
上面的做法是根据控件的当前宽度来决定显示的字符数，这样既不会撑爆控件，又可以最大程度的显示字符串。