Verschieben eines einzelnen Buchstabenwortes in eine neue Zeile

Question

Gibt es eine Möglichkeit, ein aus einem Buchstaben bestehendes Wort durch JavaScript in die nächste Zeile zu verschieben? Der Code stammt aus einer Datenbank, daher kann ich ihn nicht manuell bearbeiten. Ich habe eine Funktion gefunden, die diese Wörter findet, aber ich habe keine Idee, wie man diese auf eine neue Zeile setzt.

<div id="flop" class="foobar">Lorem ipsum dolor sit amet, consectetur adipisicing 
    elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 
    ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex a 
    commodo consequat. Duis aute irure dolor in reprehenderit in volue v 
    esse cillum dolore eu fugiat nulla p</div><br> 
<button value="Go" onclick="foo();">Go</button> 

function foo(){ 
    var d = document.getElementById('flop'); 
    var t = d.innerHTML; 
    var w = t.split(' ');  

    d.innerHTML = w[0]; 
    var height = d.clientHeight; 
    for(var i = 1; i < w.length; i++){ 
     d.innerHTML = d.innerHTML + ' ' + w[i]; 

     if(d.clientHeight > height){ 
      height = d.clientHeight; 
      if(w[i-1].length === 1){ 
       console.log(w[i-1]); 
      } 
     } 
    } 
} 

Answer 1

In Javascript, \u000A sind die Neuen-Zeile für Unicode-Zeichen entkam.

Wenn Sie die Wörter mit einem Buchstaben bereits identifizieren können, geben Sie einfach \u000A an jedes Wort voran.

Answer 2

Mai werden Sie so etwas wie dies tun wollen:

function foo() { 
 
    var d = document.getElementById('flop'); 
 
    var t = d.innerHTML; 
 
    var w = t.split(/\s/); 
 
    var s = ''; // <---have a var to store the new html 
 
    d.innerHTML = ''; // <--- empty the div 
 
    for (var i = 0; i < w.length; i++) { 
 
    if (w[i].length === 1 && i !== w.length-1) { 
 
     s += '<br>' + w[i] + '<br>'; 
 
    } else { 
 
     s += ' ' + w[i]; 
 
    } 
 
    // here append the array value to the var s which holds the 
 
    // new html build. Idea here is to have a check for the length 
 
    // of the current array value to 1 then add br tags after/before 
 
    } 
 
    d.innerHTML = s; // finally put the new html here. 
 
}

<div id="flop" class="foobar">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex a commodo consequat. Duis aute irure dolor in reprehenderit in volue v esse cillum dolore eu fugiat nulla p</div> 
 
<br> 
 
<button value="Go" onclick="foo();">Go</button>