2013-03-01 82 views
0

我有一個四行的內容的div。我能夠通過使用下面的代碼獲取行數。但我的要求是獲得div的4行文本。例如:獲取第三行div的內容

<div> 
    ut returns between paragraphsut returns between paragraphs 
    ut returns between paragraphsut returns between paragraphs 
    web ui text is going on hereut returns between paragraphsut 
    returns between paragraphs 
</div> 

在上面DIV.I想獲得第4行文字,即返回paragraphs.Is之間有什麼辦法做到這一點。

我得到的行數用下面的代碼

var content = elm.innerHTML;  
var elmHeight = elm.offsetHeight; 
var lineHeight = 15; 
var lines = elmHeight/lineHeight; 

線變量在一個特定的DIV

+3

根據不同的屏幕尺寸(寬度),行數可能會有所不同,對於小屏幕,您可能會獲得8行,這取決於文字換行,但如果確定每行以換行符結束(\ n)在...上下功夫。 – 2013-03-01 11:08:28

+0

你試圖得到第四行的代碼... – Shail 2013-03-01 11:09:45

+3

如果它有換行符: 'var fourth = $ .trm($('div').text()).span('\ n' )[3];'http://jsfiddle.net/wg3U2/ – undefined 2013-03-01 11:11:02

回答

0

在Firefox下對我的作品的行數。我希望它可以通過在IE下工作。

<html> 
    <head> 
    <script language="javascript"> 
<!-- 

function find3rdline (element) 
{ 
    var text = element.textContent; 

    var begin = -1; 
    var end = -1; 
    var top = -1; 
    var line = -1; 
    for (i = 0; i < text.length; i++) 
    { 
     var id = "marker" + i; 
     element.innerHTML = text.substr (0, i) + "<span id='" + id + "'>X</span>" + text.substr (i, text.length - i); 
     var marker = document.getElementById (id); 
     if (marker.offsetTop != top) 
     { 
      top = marker.offsetTop; 
      line++; 
      if (line == 2) begin = i; 
      else if (line == 3) 
      { 
       end = i; 
       // break; 
      } 
     } 
    } 

    element.innerHTML = text; 

    if (begin == -1) return ""; 
    else if (end == -1) return text.substr (begin, text.length - begin); 
    else return text.substr (begin, end - begin); 
} 

// --> 
    </script> 
    </head> 
    <body onload="alert ('Third line is: [' + find3rdline (text) + ']')"> 
    <div id="text"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor, leo non sollicitudin blandit, metus eros dapibus massa, nec euismod nunc sapien quis nunc. Maecenas mollis, justo sed egestas semper, nulla libero blandit sem, eget gravida ante sapien sagittis turpis. Vivamus sit amet elit tortor, a eleifend mi. Aliquam erat volutpat. Vestibulum sit amet pellentesque magna. Integer eget erat nisl. Suspendisse adipiscing placerat felis quis blandit. Etiam hendrerit tincidunt gravida. Nunc condimentum tristique commodo. Aliquam eget tellus et sapien accumsan cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor, leo non sollicitudin blandit, metus eros dapibus massa, nec euismod nunc sapien quis nunc. Maecenas mollis, justo sed egestas semper, nulla libero blandit sem, eget gravida ante sapien sagittis turpis. Vivamus sit amet elit tortor, a eleifend mi. Aliquam erat volutpat. Vestibulum sit amet pellentesque magna. Integer eget erat nisl. Suspendisse adipiscing placerat felis quis blandit. Etiam hendrerit tincidunt gravida. Nunc condimentum tristique commodo. Aliquam eget tellus et sapien accumsan cursus. 
    </div> 
    </body> 
</html> 
0

var line_number = 3; //你喜歡的行號

var result = $ .trm($('#mydiv').text()).split('\ n')[line_number]; // mydiv是除法

alert(result);