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).
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'+"  ;");
}
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!