2013-03-01 3 views
0

У меня есть div с некоторым контентом в четырех строках. Я могу получить количество строк, используя следующий код. Но мое требование состоит в том, чтобы получить 4-строчный текст div. Например:Получение третьей строки содержимого 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), вы можете работай над этим. –

+0

какой код вы пытались получить 4-ю строку ... – Shail

+3

Если у него есть символ разрыва строки: 'var 4th = $ .trm ($ ('div'). Text()). Split ('\ n') [3]; 'http://jsfiddle.net/wg3U2/ – undefined

ответ

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 - идентификатор деления

предупреждение (результат);

Смежные вопросы