javascript - 如何在每个部分的跨度中分割和换行？

Question

我使用“Detect browser wrapped lines via 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 中的所有文本，将它们拆分并包裹在 <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 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>
</ul>
</div>

我添加了 1 - 和 2 - 以表明它们是重复的。应该是在不同的部分，而不是在所有部分。

无论如何，如何分割并换行 <span> 中的每一行在每个部分中而不创建重复的内容？

工作示例:https://codepen.io/openbayou/pen/poJwaXv

JS 代码:

$(".emails .multi-items").each(function (i) {
var $cont = $('.emails .multi-items .message-contain #content')
var text_arr = $cont.text().split(' ');
for (i = 0; i < text_arr.length; i++) {
  text_arr[i] = '<span>' + text_arr[i] + ' </span>';
}

$cont.html(text_arr.join(''));
$wordSpans = $cont.find('span');

var lineArray = [],
  lineIndex = 0,
  lineStart = true,
  lineEnd = false

  $wordSpans.each(function(idx) {
      var pos = $(this).position();
      var top = pos.top;

      if (lineStart) {
          lineArray[lineIndex] = [idx];
          lineStart = false;

      } else {
          var $next = $(this).next();

          if ($next.length) {
              if ($next.position().top > top) {
                  lineArray[lineIndex].push(idx);
                  lineIndex++;
                  lineStart = true
              }
          } else {
              lineArray[lineIndex].push(idx);
          }
      }

  });


 //console.log( lineArray)
 for (i = 0; i < lineArray.length; i++) {
  var start = lineArray[i][0],
      end = lineArray[i][1] + 1;

  /* no end value pushed to array if only one word last line*/
  if (!end) {
      $wordSpans.eq(start).wrap('<span class="line_wrap">')
  } else {
      $wordSpans.slice(start, end).wrapAll('<span class="line_wrap">');
  }

 };
});

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');

Here is the gist