Wrap new lines

wrapNewLines.js

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.forEach(word => {
      section.innerHTML += `<span>${word}</span>`
    })
    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 - 1) {
        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
  })
}

// Examples: 
// wrapNewLines('.wrap-me')
// <span class='new-line'> ... </span>
// wrapNewLines('.wrap', 'div', 'line')
// <div class='line'> ... </div>