Jak przenieść pojedynczą literę na końcu linij do nowego wiersza? (HTML, CSS a może JS?)

Oczywiście robimy to za pomocą specjalnego znaku spacji, który łączy literę z poprzedzającym go wyrazem. CSS niestety nic nam tu raczej nie pomoże. No dobrze wiemy już że musimy wpisać kod HTML (tzw. non-braking HTML space name code).

non-braking space - HTML

No ok ale co teraz? Mamy edytować cały tekst na naszej stronie? To mogło by być bardzo czasochłonne a w przypadku większych stron wręcz niemożliwe. Dlatego będąc leniwym musimy spróbować zrobić to automatycznie używając do tego oczywiście naszego kochanego JavaScript.

function lastSingleLetterToNewLine(el){
  let result;
  el.forEach((element, i)=>{
     
     if(!element.innerHTML.match(/[{}]|<script|^\n$/gi)){
      result = element.innerHTML.replace(/ (.) /gi, " "+'\$1'+"&nbsp ;");
     }
     element.innerHTML = result;
     console.log(result);
  });
}

let el = document.querySelectorAll("h1, h2, h3, h4, h5, p, span, .text");
lastSingleLetterToNewLine(el);

Nie ma tu co za wiele wyjaśniać. Kod sprawdza czy przypadkiem nie zaciągnął jakiegoś skryptu a następnie wyszukuje wszystkich pojedynczych liter otoczonymi spacjami po obu stronach i tą przednią zastępuje naszym specjalnym kodem HTML z niełamiącą się spacją. Jeśli macie jakieś przemyślenia jak można taki kod usprawnić to zostawcie sugestie w komentarzu.

Demo powyższego skryptu możecie przetestować na CodePen https://codepen.io/DevWL/pen/VwZpzNp

Dzięki!