jquery實現的文本自定義換行效果:本章節介紹一下如何利用jquery實現文本的換行效果，當然這個換行效果比較粗糙，無法粉筆對應的位置是否該換行，不過希望能偶在代碼中學到一定的只是和開闊響應的思路。代碼如下: <!DOCTYPE html> <html> <head> <meta charset=
jquery實現的文本自定義換行效果:
本章節介紹一下如何利用jquery實現文本的換行效果，當然這個換行效果比較粗糙，無法粉筆對應的位置是否該換行，不過希望能偶在代碼中學到一定的只是和開闊響應的思路。
代碼如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> .content{ width:20%; margin:auto; padding:15px; border:10px solid #6CF; text-align:left; line-height:20px; font-size:12px; font-family:Arial, Helvetica, sans-serif; position:relative; margin:0px; } .content label{ display:inline-block; border:0; padding:0px; margin:0px; } </style> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script type="text/javascript"> var o=""; $(function(){ o=$(".content").html(); $("#bt").click(function(){ change(); }) }) function change(){ var lw=0; var maxs=0; var line=$("#line").val(); var h=o.split(""); var webh=""; for(var i=0;i<h.length;i++){ webh+='<label>'+h[i]+'</label>'; } $(".content").html(webh); $(".content label").each(function(){ if(maxs>$(this).position()['left']){ lw++; maxs=0; if(lw==line){ $(this).before('<br/><br/>'); lw = 0; } } maxs = Math.max($(this).position()['left'],maxs); }) } </script> </head> <body> <center> <input id="line" type="text" value="1" /> <input type="button" id="bt" value="改變" /> <div class="content">螞蟻部落歡迎您，只有努力奮鬥才會有美好的明天，沒有人一開始就是高手，分享互助</div> </center> </body> </html>
上面的代碼實現了我們的要求，文本框中是要進行換行的數字，如果是1，那麼字元串每一行後面都會加空行，如果是2，那麼沒兩行後面加空行，以此類推，下麵介紹一下它的實現過程。
一.代碼註釋:
1.var o=""，聲明一個變數用來存儲獲取div下html內容。
2.$(function(){})，當文檔結構完全載入完畢再去執行函數中的代碼。
3.o=$(".content").html()，獲取div中的內容賦值給變數o。
4.$("#bt").click(function(){change();})，點擊按鈕執行事件處理函數，並調用change()函數。
5.function change(){}，此函數實現了換行效果。
6.var lw=0，聲明一個變數並初始化為零，此變數用存儲分行的數目。[/s
7.var maxs=0，聲明一個變數用來存儲label標簽距離父元素的左邊距。
8.var line=$("#line").val()，獲取文本框值，也就是規定我們如何分行的數字。
9.var h=o.split("")，將字元串中的每一個字元進行分割。
10.var webh=""，聲明一個變數用來存儲添加label標簽的內容。
11.for(var i=0;i<h.length;i++)，遍曆數組中的每一個數組項，也就是每一個字元。
12.webh+='<label>'+h+'</label>'，為原來字元串中的每一個字元外麵包裹label標簽。
13.$(".content").html(webh)，將內容寫入div中。
14.$(".content label").each(function(){})，遍歷每一個label標簽。
15.if(maxs>$(this).position()['left']){}，判斷的maxs的值是否大於當前label標簽距離父div元素的左邊距，如果不換行的話maxs的值不可能大於左邊距的，但是如果遇到父元素的邊緣出現換行就會大於左邊距了。
16.lw++，行數加1。
17.maxs=0，將maxs的值重置為0。
18.if(lw==line){$(this).before('<br/><br/>');lw = 0;} ，如果達到換行的數目，那麼就會添加換行標簽進行換行，並重置lw。
19.maxs = Math.max($(this).position()['left'],maxs)，將maxs的值設置兩者較大的一個。
二.相關閱讀:
1.split()函數可以參閱javascript的split()函數使用介紹一章節。 [
2.html()函數可以參閱jQuery的html()方法一章節。
3.each()函數可以參閱jQuery的each()方法一章節。
4.position()函數可以參閱jQuery的position()方法一章節。
5.before()函數可以參閱jQuery的before()方法一章節。
6.Math.max()函數可以參閱JavaScript的Math.max()方法一章節。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=13992
更多內容可以參閱:http://www.softwhy.com/jquery/
