将段落的每一行包裹在一个跨度中

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>

此处文本将根据其容器的宽度拆分为多行，我试图将每条自动调整大小的行包装到一个跨度元素中。但我未能做到这一点，因为我们找不到使用的行。\n有什么方法可以实现这一点？

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

Answer 1

分割线

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

// 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 + opentag;
        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>

注意

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