截取文字内容实现控制列表宽度的原理为：可以对所有列表项截取相同长度。这样截取出来的列表项宽度就一致了。当然这种解决方式是基于字符等宽的基础上，如汉字字符。但是，如果是英文字符，这种解决方法就不尽如人意了。这种解决方法使用到了jQuery的ready()、each()和text()函数以及JavaScript的substr()函数。
1．jQuery的ready()函数--文档加载完成事件
该函数在文档就绪后，添加特殊效果，或者加入动态事件。其语法如下：
- 语法一 $(document).ready(function)
- 语法二 $().ready(function)
- 语法三 $(function)
注：以上三种语法形式都表示调用ready()函数。function参数是一个必选参数，表示函数定义。在其中定义了当文档加载后要运行的功能。
2．jQuery的each()函数--遍历jQuery对象
该函数对jQuery对象进行遍历，为每个匹配元素执行函数。其语法如下：
- 语法一 each(function)
- 语法二 each(object,function)
注：语法一形式是以每一个匹配的元素作为上下文来执行一个函数。语法二形式为通用遍历方法，可用于遍历对象和数组。
3．jQuery的text()函数--所有匹配元素的内容
该函数可以获取并设置所有匹配包含的文本内容所组合起来的文本。其语法如下：
- text([val|function])
其中，参数val表示文本内容，function表示产生文本的函数。
4．功能实现
控制列表宽度的步骤如下。
（1）需要利用jQuery的ready()函数来实现在页面整体加载完成后执行特效效果。
（2）在function()内部使用each()函数遍历列表项。
（3）在each()函数中获取当前被遍历的<li>中嵌套的<span>元素对象的文本内容。
（4）如果文本长度超出范围，则通过substr()函数截取并加上删节号。
首先，把jQuery库引入进来：
- <script src="jslib/jquery-1.6.min.js" type="text/JavaScript"></script>
然后，添加JavaScript代码，利用jQuery的选择器找出每个列表项，获取文字长度，并按照要求来进行截取。完整代码如下：
- 1<script type="text/JavaScript">
- 2 $(document).ready(function() { //使用ready()函数，实现页面加载后 即出现特效
- 3 $(".list").each(function() { //使用each()遍历每一个<span>
- 4 var inText = $(this).text(); //获取<span>中的文字内容
- 5 if (inText.length > 10) { //判断文字内容长度
- //使用text()函数设置<span>中的文本，并用substr()截取
- 6 $(this).text(inText.substr(0,10)+"...");
- 7 }
- 8 });
- 9 });
- 10</script>
图4.2是加入jQuery代码调整列表项长度后的效果。将其与图4.1进行比较可以发现，列表项长度统一，不会占用大量的页面空间，更方便页面布局。而且，这种修改列表项长度的方式能灵活控制长度值，灵活适应页面布局。
 |
| 图4.2 截取文字内容实现列表中宽度相同的列表项 |
