将段落的每一行换行在一个范围内

Question

我有一个<div>元素，它将显示一个没有换行符的段落，如示例中所示

<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</div>

在这里，文本将根据其容器的宽度拆分为多行，我正在尝试将自动调整大小的行包装成一个 span 元素。但我未能做到这一点，因为我们无法使用 n 找到行的末尾。有什么方法可以实现这一点吗？

注意 - 我在搜索时找到了答案 我可以将多行文本的每一行包装在一个范围内吗？. 但是 questin 与此并不相似，这里我有一个单行测试并且没有换行符，但是上面的问题每行都有换行符

Answer 1

为了能够计算何时有新行，我们必须首先知道句子的最后一个单词是什么时候。为了找出答案，我们将为每个单词添加一个标签。然后我们取每个单词的 Y 坐标。如果存在差异，我们知道新规则已经开始。

有关更新 https://github.com/nielsreijnders/textSplitter/blob/master/src/index.ts

// Openingtag & closingtag has to be a string!!
function splitLines(container, openingtag, closingtag) {
    // Get the spans in the paragraph 
    var spans = container.children,
        top = 0,
        // set tmp as a string 
        tmp = '';
    // Put spans on each word, for now we use the <n> tag because, we want to save 5 bytes:)
    container.innerHTML = container.textContent.replace(/S+/g, '<n>$&</n>');   
    // Loop through each words (spans) 
    for (let i = 0; i < spans.length; i++) {
        // Get the height of each word
        var rect = spans[i].getBoundingClientRect().top;
        // If top is different as the last height of the word use a closingtag and use an opentag after that
        if (top < rect) tmp += closingtag + openingtag;
        top = rect;
        // Add the spans + space between each word
        tmp += spans[i].textContent + ' ';
    }
    // Add the lines back to the paragraph 
    container.innerHTML = tmp += closingtag;
}

function splitLines(container, opentag, closingtag) {
       var spans = container.children,
    top = 0,
    tmp = '';
container.innerHTML = container.textContent.replace(/S+/g, '<n>$&</n>');      for (let i = 0; i < spans.length; i++) {
    var rect = spans[i].getBoundingClientRect().top;
    if (top < rect) tmp += closingtag + opentag;
    top = rect;
    tmp += spans[i].textContent + ' ';
}
container.innerHTML = tmp += closingtag;
}
splitLines(document.querySelectorAll('p')[0], '<span>','</span>')

* {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  line-height: 22px;
}
h1 {
  letter-spacing: 1px;
  border-bottom: 1px solid #eaecef;
  padding-bottom: .5em;
}
p {
  font-size: 14px;
  width: 350px;
}
p span:nth-child(even) {
  color: #fff;
  background: #000;
}

<h1>TextSplitter 🥭</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.</p>

调整窗口大小时，您必须更新行！

Answer 2

这应该做你想要的，或者接近它。

function trimByPixel(str, width) {
    var spn = $('<span style="visibility:hidden"></span>').text(str).appendTo('body');
    var txt = str;
    while (spn.width() > width) { txt = txt.slice(0, -1); spn.text(txt + "..."); }
    return txt;
}
var stri = $(".str").text();
function run(){
  var s = trimByPixel(stri, $(".str").width()).trim()
  stri = stri.replace(s,"")
  $(".result").append("<span>"+s+"</span>");
  
  if(stri.trim().length > 0){
    run();
  }
}
run();

演示

function trimByPixel(str, width) {
    var spn = $('<span style="visibility:hidden"></span>').text(str).appendTo('body');
    var txt = str;
    while (spn.width() > width) { txt = txt.slice(0, -1); spn.text(txt + "..."); }
    return txt;
}
var stri = $(".str").text();
function run(){
  var s = trimByPixel(stri, $(".str").width()).trim()
  stri = stri.replace(s,"")
  $(".result").append("<span>"+s+"</span>");
  
  if(stri.trim().length > 0){
    run();
    $(".str").remove(); //remove original
  }
}
run();

.str{ width:300px; }
.result span{ display:block }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="str"> 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</div>
<div class="result"></div>