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

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 .有什么方法可以实现这一点吗？

注意-当我搜索 Can I wrap each line of multi-line text in a span? 时，我找到了这个问题的答案。但问题与此不相似，这里我在单行中进行了测试，并且没有换行符。但是上面的问题每行都有换行符

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>

调整窗口大小时必须更新线条!