包裹跨度中的每一行

Question

我試圖找出如何在一個范圍內包裝每行副本。 例如，如果我有如下元素：

 .body-copy { position: relative; width: 100%; height: auto } 

 <div class="body-copy"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est labour. </div> 

所以文本填充它的容器的寬度，我需要在文檔加載，窗口加載和窗口調整大小的span包裝每行副本。 如果這是可能的？ 對此有任何建議將不勝感激！

Answer 1

好的，所以這里是一個雜亂但功能性的方式來做你要求的。 這樣做是使用隱藏的div來測量原始的寬度，因為我們逐個添加單詞。 然后，一旦達到寬度閾值，我們創建一個包含到目前為止收集的單詞的新span元素。 洗凈。沖洗。 重復。 最后，我們挖掘剩余的單詞並將它們添加到自己的span ，並用新的HTML替換原始文本。 您可以在文檔加載或窗口調整大小時隨時使用wordWrap()函數。 我在span元素中添加了一些邊框，這樣您就可以輕松查看標記的應用位置。

 $(document).ready(function() { wordWrap(); }); function wordWrap() { var bdy = $(".body-copy"); var text = $(bdy).text(); var html = $(bdy).html(); var bWidth = $(bdy).width(); var words = text.split(" "); var span = ""; var word = ""; var allSpans = ""; var lastWord = ""; $(words).each(function(i, w) { if (lastWord != "") { w = lastWord + " "+ w ; lastWord = ""; }; word = w + " "; span = span + word; $(".body-copy-two").append(word); if ($(".body-copy-two").width() >= bWidth) { var wLen = word.length; span = span.slice(0, -wLen); lastWord = w + " "; allSpans = allSpans + "<span>" + $.trim(span) + "</span>"; $(".body-copy-two").html(""); span = ""; word = ""; } }); var lastSpan = "<span>" + $(".body-copy-two").text() + "</span>"; $(bdy).html(allSpans + lastSpan); } 

 .body-copy { position: relative; width: 100%; height: auto } .body-copy-two { position: absolute; visibility: hidden; } .body-copy span { border: 1px solid black; display:block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="body-copy"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est labour. </div> <div class="body-copy-two"></div>