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!

Jak prosto debugować horyzontalny scroll?

Czy podczas tworzenia projektu od podstaw napotkaliście na tzw horyzontalny scroll i nie do końca wiedzieliście gdzie szukać jego przyczyny? Jeśli korzystasz z przeglądarki chrome możecie w prosty sposób wyszukać element, który jest jego sprawcą.

Wystarczy, że wkleisz do konsoli poniższy skrypt a wszystkie elementy na stronie zostaną otoczone czerwoną linią. Dzięki temu łatwo wychwycisz element, który wylatuje poza standardową szerokość twojej strony internetowej.

(function (debug) {
var w = debug.documentElement.offsetWidth,
t = debug.createTreeWalker(debug.body, NodeFilter.SHOW_ELEMENT),
b;
while (t.nextNode()) {
b = t.currentNode.getBoundingClientRect();
if (b.right > w || b.left < 0) {
t.currentNode.style.setProperty(‘outline’, ‘1px dotted red’, ‘important’);
console.log(t.currentNode);
}
};
}(document));