HTML代碼：
<body> <div class="txt_bos"><!--在每一個放置文字的class外面包一個div，以便設置動畫樣式用，同樣用class--> <div class="txt1"><!--為了保證功能的通用性，這里全用class--> 石村，位於蒼莽山脈中，四周高峰大壑，茫茫群山巍峨。 清晨，朝霞燦燦，仿若碎金一般灑落，沐浴在人身上暖洋洋。 一群孩子，從四五歲到十幾歲不等，能有數十人，在村前的空地上迎着朝霞，正在哼哈有聲的鍛煉體魄。一張張稚嫩的小臉滿是認真之色，大一些的孩子虎虎生風，小一些的也比划的有模有樣。 一個肌體強健如虎豹的中年男子，穿着獸皮衣，皮膚呈古銅色，黑發披散，炯炯有神的眼眸掃過每一個孩子，正在認真指點他們。 </div> </div> <div class="txt_bos"> <div class="txt1"> “太陽初升，萬物初始，生之氣最盛，雖不能如傳說中那般餐霞食氣，但這樣迎霞鍛體自也有莫大好處，可充盈人體生機。一天之計在於晨，每曰早起多用功，強筋壯骨，活血煉筋，將來才能在這蒼莽山脈中有活命的本錢。”站在前方、指點一群孩子的中年男子一臉嚴肅，認真告誡，而后又喝道：“你們明白嗎？” “明白！”一群孩子中氣十足，大聲回應。 山中多史前生物出沒，時有遮蔽天空之巨翼橫過，在地上投下大片的陰影，亦有荒獸立於峰上，吞月而嘯，更少不了各種毒蟲伏行，異常可怖。 “明白呀。”一個明顯走神、慢了半拍的小家伙奶聲奶氣的叫道。 </div> </div> <div class="txt_bos"> <div class="txt1"> 這是一個很小的孩子，只有一兩歲的樣子，剛學會走路沒幾個月，也在跟着鍛煉體魄。顯然，他是自己湊過來的，混在了年長的孩子中，分明還不應該出現在這個隊伍里。 “哼哼哈嘿！”小家伙口中發聲，嫩嫩的小手臂賣力的揮動着，效仿大孩子們的動作，可是他太過幼小，動作歪歪扭扭，且步履蹣跚，搖搖擺擺，再加上嘴角間殘留的白色奶漬，引人發笑。 一群大孩子看着他，皆擠眉弄眼，讓原本嚴肅的晨練氣氛輕緩了不少。 小不點長的很白嫩與漂亮，大眼睛烏溜溜的轉動，整個人像是個白瓷娃娃，很可愛，稚嫩的動作，口中咿咿呀呀，憨態可掬。這讓另一片場地中盤坐在一塊塊巨石上正在吞吐天精的一些老人也都露出笑容。 就是那些身材高大魁梧、上半身**、肌腱光亮並隆起的成年男子們，也都望了過來，帶着笑意。他們是村中最強壯的人，是狩獵與守護這個村落的最重要力量，也都在鍛體，有人握着不知名的巨獸骨骼打磨而成的白骨大棒，也有人持着黑色金屬鑄成的闊劍，用力舞動，風聲如雷。 </div> </div> </body>
CSS樣式表：
<style type="text/css"> * { -moz-user-select: -moz-none; -moz-user-select: none; -o-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .txt_bos { position: relative; width: 500px; height: 25px; margin-top: 50px; left: 400px; background-color: yellow; overflow: hidden; } .txt1 { position: relative; width: 100%; height: 25px; font-family: 微軟雅黑; font-size: 20px; word-wrap: break-word; overflow: hidden; } </style>
JQuery 代碼：
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.color.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var MaxLength = 36;//先設置一個變量用做第一行最多顯示的長度
var txt = new Array();//定義一個數組
var texts = $(".txt1");//獲取一下每一個放置文字的div，一組div
for (var i = 0; i < texts.length; i++) {//寫一個循環，循環次數為所有放置文字div的數量
if (texts.eq(i).text().length > MaxLength) {
texts.eq(i).parent().index(i);//給每個索引上的div的父級賦一個index屬性，也就是這個段文字在數組內的索引
txt[i] = texts.eq(i).text();//將獲取的一組文字div按照索引一次將文字放進數組
var st = texts.eq(i).text().substr(0, MaxLength) + '...';//一上來默認第一行顯示長度為上面定義的變量長度，后面加...放進變量
texts.eq(i).text(st);//再將變量給每組文字的顯示
}
}
//每組文字div的點擊事件
$(".txt1").click(function () {
if ($(this).outerHeight() > 27) {//如果這個div的高度超過了每行的高度，則執行超出部分隱藏
$(this).text($(this).text().substr(0, MaxLength) + '...');//將顯示文字重新定義為初始狀態
//給外面包着的div，也就是父級div寫一個動畫，高度為目前重新定以后文字高度，400毫秒慢慢縮回，用到animate
$(this).parent().animate({ height: $(this).outerHeight(), backgroundColor: 'yellow' }, 400);
}
else {//如果沒有超過每行高度，也就是為初始狀態的時候，點擊需要慢慢下拉打開
$(this).text(txt[$(this).parent().index()]);//通過父級的index值找到數組內對應索引的文字，將其顯示
$(this).css('height', 'auto');//設置這個div的css樣式，高度為文字顯示高度
//因為父級div樣式表中設置超出部分隱藏，用animate將高度慢慢下拉至子及div，也就是文字div目前的高度，400毫秒執行完畢
$(this).parent().animate({ height: $(this).outerHeight(), backgroundColor: 'white' }, 400);
}
});
});
</script>
