如何在每个部分的跨度中拆分和换行？

Question

我使用“通过 javascript 检测浏览器包装的行”作为将每一行包装在<span>. 但是，如果要拆分和包装的元素不止一个，我就会遇到问题。例如：如果我有多个部分要拆分和包装，例如：<div class="emails"><ul class="multi-items">  <div class="message-contain">   <div id="content">       1 - Lorem Khaled Ipsum is a major key to success. They will try to close the door on you, just open it. Watch your back, but more importantly when you get out the shower, dry your back, it’s a cold world out there.    </div></div><div class="message-contain">  <div id="content">       2 - The key to more success is to get a massage once a week, very important, major key, cloth talk. Eliptical talk.   </div></div></ul></div>它将把所有的文本.content，拆分和包装在 a 中<span>并复制它们。所以看跌期权看起来像这样；<div class="emails"><ul class="multi-items">  <div class="message-contain">   <div id="content">       <span class="line_wrap">1 - Lorem Khaled Ipsum is a major key to success.</span>       <span class="line_wrap">They will try to close the door on you, just open it.</span>       <span class="line_wrap">Watch your back, but more importantly when you get out the</span>       <span class="line_wrap">shower, dry your back, it’s a cold world out there.</span>        <span class="line_wrap">2 - The key to more success is to get a massage once</span>       <span class="line_wrap">a week, very important, major key, cloth talk.</span>       <span class="line_wrap">Eliptical talk.</span>    </div></div><div class="message-contain">  </div></div></ul></div>我添加了 1 - 和 2 - 以表明它们重复。假设存在于不同的部分，而不是所有的部分。无论如何，如何<span>在每个部分中拆分和包装每一行而不创建重复的内容？工作示例：https ://codepen.io/openbayou/pen/poJwaXv

Answer 1

我写了一个原生的 JavaScript 版本：

function wrapNewLines(targetSelector, wrapEl = 'span', wrapClass = 'new-line') {

  const content = document.querySelectorAll(targetSelector)

  content.forEach(section => {

    let sectionWidth = section.getBoundingClientRect().width

    let words = section.innerText.split(/( )/g)

    section.innerHTML = words.map(word =>`<span>${word}</span>`).join('')

    let lines = []

    let line = []

    let lineWidth = 0

    let spans = section.querySelectorAll('span')

    spans.forEach((span, i) => {

      let spanWidth = span.getBoundingClientRect().width

      if (lineWidth + spanWidth <= sectionWidth - 4) {

        line.push(span)

        lineWidth += spanWidth

      } else {

        lines.push(line)

        line = []

        lineWidth = 0

        line.push(span)

        lineWidth += spanWidth

      }

    })

    if (line.length) lines.push(line)

    let newLines = lines

      .map(

        line =>

          `<${wrapEl} class=${wrapClass}>${line

            .map(span => span.innerText)

            .join('')}</${wrapEl}>`

      )

      .join('')

    section.innerHTML = newLines

  })

}

wrapNewLines ('.emails .multi-items .message-contain #content');

Answer 2

试试下面的代码

$(".emails .multi-items").each(function(i) {

          var $cont = $(".message-contain #content");

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

          for (i = 0; i < text_arr.length; i++) {

            text_arr[i] = "<span class='line_wrap'>" + text_arr[i] + ". </span>";

          }

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

        });