Zeilenumbruch automatisch entfernen

Hi zusammen, Gleich vorweg, kann mein Problem nur tippen aber gerade nicht zeigen. Bin nur am Handy. Schon mal sorry dafür. Ein div Tag mit border 1px im style. Also ein Kasten! :) In diesem Kasten sind:

bla bla

bla bla

bla bla

bla bla

Somit werden mir auch die Zeilenumbrüche angezeigt. Ich kann diese nicht per Hand entfernen. Die sind nun mal da. Gibt es eine Möglichkeit oder ein Befehl womit man der div Kasten angezeigt wird, ohne Zeilenumbrüche? Also bitte nicht falsch verstehen, die Zeilenümbrüche sollen schon da sein aber nicht die leeren! Hab über Javascript was gefunden was nicht funktioniert hat. Bin auch kein Javascript spezi.
Kommentar abgeben zu diesen Beitrag/Code ?
Dann hier klicken

Der hier verwendete Code

<style> textarea{ height:200px; width:100%; } </style> <main> <p>bla bla</p> <p></p> <p>bla bla</p> <p>bla bla </p> <p>bla bla </p> <p> </p> <p> </p> <p>bla</p> <p>test</p> </main> <h3>ausgabe nach den Code</h3> <textarea> </textarea> <script> papa=document.getElementsByTagName('main')[0]; ele=document.querySelectorAll('p'); ele.forEach(function(kind){ if(kind.innerHTML.length<=0){ /*leere elemente löschen */ papa.removeChild(kind); }else{ /* leerzeichen killen */ val=kind.innerHTML.trim(); kind.innerHTML=val; } }) document.getElementsByTagName('textarea')[0].innerHTML=papa.outerHTML; </script>