先看一個正常的沒有做修改的列表
像這樣的列表在頁面中占據大量空間，而且列表項長度參差不齊。頁面佈局中其他部分必須要適應這種列表寬度來安排，不能做到靈活佈局。
jQuery控制列表的寬度有兩種解決方法。
方法一：截取文字內容實現控制列表寬度
原理：對所有列表項截取相同長度。這樣截取出來的列表項寬度就一致瞭。這種解決方式是基於字符等寬的基礎上，如漢字字符。但是，如果是英文字符，這種解決方法就不盡如人意瞭。這種解決方法使用到瞭jQuery的ready() 、each()和text()函數以及Javascript的substr()函數。
1. ready()函數——文檔加載完成事件，該函數在文檔就緒後，添加特殊效果，或者加入動態事件。語法格式：
$(document).ready(function)
$().ready(function)
$(function)
Function參數是必選參數，表示函數定義。在其中定義瞭當文檔加載後要運行的功能。
2. each()函數——遍歷jQuery對象，該函數對jQuery對象進行遍歷，為每個匹配元素執行函數
each(function) # 以每一個匹配的元素作為上下文來執行一個函數
each(object,function) #遍歷對象和數組
$(selector).each(function(index,element))
3. text()函數——所有匹配元素的內容，該函數可以獲取並設置所有匹配包含的文本內容所組合起來的文本，語法格式如下：
text( [val|function] ) #val表示文本內容，function表示產生文本的函數
4. substr()方法可在字符串中抽取從start下標開始的指定數目的字符。語法格式：
stringObject.substr(start,length) #start，必需。要抽取的子串的起始下標。Length，可選。子串中的字符數。
例：
<script type="text/javascript">
$(document).ready(
function(){
$(".list").each(
function(){
var inText = $(this).text();
if(inText.length>10){
$(this).text(inText.substr(0,10)+"…");
}
});<!–en>
}
);
</script>
<body>
<p>
<ul>
<li><span class="list">jQuery是一個Javascript庫</span></li>
<li><span class="list">jQuery極大地簡化瞭Javascript編程</span></li>
<li><span class="list">jQuery很容易學</span></li>
<li><span class="list">jQuery擁有供AJAX開發的豐富函數（方法）</span></li>
</ul>
</p>
</body>
顯示效果：
方法二：修改層的寬度控制列表寬度
原理：可以把所有列表項所在的層設置為長度相同。這樣截取出來的列表項寬度就一致瞭。這種解決方式與字符寬度無關，所以字符寬度不同不會影響到列表項寬度。
例：
創建列表（完全沒有使用列表元素，）
在頁面頭部添加：
<style type="text/css" >
.list
{
font-size:14px;
width:150px;
}
.subone
{
float:left;
overflow:hidden;
}
.subtwo
{
float:left;
color:blue;
}
</style>
Html代碼：
<body>
<p>
<p class="list">
<p class="subone">jQuery是一個Javascript庫</p>
<p class="subtwo"> 簡介</p>
</p>
<p class="list">
<p class="subone">jQuery極大地簡化瞭Javascript編程</p>
<p class="subtwo"> 簡介</p>
</p>
<p class="list">
<p class="subone">jQuery很容易學</p>
<p class="subtwo"> 簡介</p>
</p>
<p class="list">
<p class="subone">jQuery擁有供AJAX開發的豐富函數（方法）</p>
<p class="subtwo"> 簡介</p>
</p>
</p>
</body>
顯示效果：
功能實現步驟：
1. 利用jQuery的ready()函數實現在加載完成後執行特效
2. 在function（）內部使用each（）函數遍歷列表
3. 判斷每一個列表項的整體長度是否大於預定義寬度
4. 如果大於，計算出第一部分需要的長度並設置（第二部分長度確定）
5. 適當調整列表項高度
<script src="jslib/jquery-1.8.3.js" type="text/javascript" ></script>
<script type="text/javascript">
$(function(){
var linelen = 120; #預定義列表項的寬度
$.each($(".list"),
function(i){ www.aiwalls.com
if( ( $(".subone:eq(" +i+ ")" ).width() +$(".subtwo:eq(" +i+ ")").width() ) >linelen )
{
var length = linelen – $(".subtwo:eq("+i+")").width(); #計算出列表項第一部分需要的高度
$(".subone:eq("+i+")").css("width",length+"px"); #設置寬度
$(".subone:eq("+i+")").css("height",65+"px"); #設置高度
}<!–end of if–>
});<!–end of each–>
});
</script>
最終效果：
