Phát hiện các đường bao bọc của trình duyệt qua javascript

Question

Tôi cần javascript để phát hiện từng dòng trình duyệt được bao bọc văn bản và gói nó vào <span class="line">.

Tôi đã xem các bài viết nói về đo lường trục y của từng từ, nhưng chưa thấy một giải pháp vững chắc.

Đây là những gì tôi có cho đến nay. Xem trên Jsfiddle.

HTML

<div class="inline-bg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus condimentum metus, et placerat augue rutrum vitae. Donec arcu lorem, eleifend at elementum eget, consectetur vel lacus. Nam euismod iaculis varius. Phasellus sed dui diam. Nullam facilisis, diam sit amet sagittis cursus, metus tortor gravida erat, ut fringilla risus ipsum eu nisl.</div>​ 

JS/jQuery

(function($){ 
    $.fn.inlinebackground = function() { 
     $.each(this, function(i,t) { 
      var split = $(t).html().split(' '); 
      var output = ''; 
      $.each(split, function(i,o){ 
       output += '<span class="line">'+o+'</span>'; 
       if (i < (split.length - 1)) { 
        output += '<br>'; 
       } 
      }); 
      $(t).html(output); 
     }); 
    } 
})(jQuery); 

/* End Plugin Code */ 

// Run the plugin on .news-caption 
$(function(){ 
    $('.inline-bg').inlinebackground(); 
}); 

CSS

.inline-bg { width: 200px; line-height:3em; } 
.inline-bg span.line { background-color: black; color: white; padding: 15px; } 

Answer 1

Tôi đã phải thừa nhận lúc đầu tôi nghĩ đây sẽ là một nhiệm vụ khó khăn kể từ khi không có cách nào để nhiệm vụ br owser để cho bạn biết nơi ngắt dòng tự động diễn ra.

Tôi đã tạo giải pháp kết thúc tốt nhất mỗi từ trong một khoảng, sau đó trải qua tất cả các nhịp để xác định vị trí hàng đầu của chúng trong vùng chứa. Sau đó nó xây dựng một mảng các chỉ mục của các dòng bắt đầu và các nhịp kết thúc và kết thúc tốt đẹp mỗi dòng của các nhịp từ trong một khoảng gói.

DEMO:http://jsfiddle.net/KVepp/2/

thể Hạn chế:

• Space thêm vào ở cuối mỗi khoảng thời gian có lẽ có thể gây ra một khoảng để phá vỡ để một dòng mới, nơi văn bản có thể không.
• Không chắc chắn nếu mỗi khoảng từ cần được loại bỏ khi các dòng được bao bọc. (Rất đơn giản mod)
• Giả không html khác trong bao bì khác so với văn bản
• Cần một công việc bổ sung ít để được biến thành một plugin nếu cần cho nhiều container
• regex cho lời là chia đơn giản ở không gian. Khả năng cần thêm regex cho các không gian định kỳ

HTML:

<div id="content">Lorem Ipsum<div> 

CSS:

#content{ position:relative} 

JS:

var $cont = $('#content') 

var text_arr = $cont.text().split(' '); 

for (i = 0; i < text_arr.length; i++) { 
    text_arr[i] = '<span>' + text_arr[i] + ' </span>'; 
} 

$cont.html(text_arr.join('')); 

$wordSpans = $cont.find('span'); 

var lineArray = [], 
    lineIndex = 0, 
    lineStart = true, 
    lineEnd = false 

$wordSpans.each(function(idx) { 
    var pos = $(this).position(); 
    var top = pos.top; 

    if (lineStart) { 
     lineArray[lineIndex] = [idx]; 
     lineStart = false; 

    } else { 
     var $next = $(this).next(); 

     if ($next.length) { 
      if ($next.position().top > top) { 
       lineArray[lineIndex].push(idx); 
       lineIndex++; 
       lineStart = true 
      } 
     } else { 
      lineArray[lineIndex].push(idx); 
     } 
    } 

}); 

for (i = 0; i < lineArray.length; i++) { 
var start = lineArray[i][0], 
    end = lineArray[i][1] + 1; 

/* no end value pushed to array if only one word last line*/ 
if (!end) { 
    $wordSpans.eq(start).wrap('<span class="line_wrap">') 
} else { 
    $wordSpans.slice(start, end).wrapAll('<span class="line_wrap">'); 
} 

}