zurück zum Blog

11 2024

Webdesign, WordPress

fitText oder Texte auf komplette Seitenbreite

Wir haben an einem Script gearbeitet, da die bestehenden Plugins entweder auf jQuery basieren oder die Scripte veraltet sind.

Deshalb gibt es jetzt unser Script, welches Überschriften (h1, h2, h3) die in einem Container sind, welcher die Klasse „stretch“ hat, auf die komplette Seiten-(Container)-Breite zieht.

Das ist ein Beispiel

Der Clou für WordPress: Wenn ihr eurer Überschrift einfach die Klasse „wide“ gebt, wird dieses erst ummantelt mit einem Container mit der Klasse „stretch“ und der Rest geht von alleine, ihr braucht nur folgendes Script in den Footer zu packen:

<script>
         document.addEventListener('DOMContentLoaded', () => {
        function wrapWideHeadings() {
            const wideHeadings = document.querySelectorAll('h1.wide, h2.wide, h3.wide');
            wideHeadings.forEach(heading => {
                if (heading.parentElement && heading.parentElement.classList.contains('stretch')) {
                    return;
                }

                const stretchContainer = document.createElement('div');
                stretchContainer.className = 'stretch';
                heading.parentNode.insertBefore(stretchContainer, heading);
                stretchContainer.appendChild(heading);
            });
        }

        function adjustFontSizeToFitContainer() {
            const containers = document.querySelectorAll('.stretch');
            containers.forEach(container => {
                const heading = container.querySelector('h1, h2, h3');
                if (!heading) return;

                const containerWidth = container.clientWidth;
                heading.style.fontSize = "10px";
                let fontSize = 10;

                while (heading.scrollWidth <= containerWidth && fontSize < 500) {
                    fontSize++;
                    heading.style.fontSize = `${fontSize}px`;
                }

                heading.style.fontSize = `${fontSize - 1}px`;
            });
        }
        wrapWideHeadings();
        setTimeout(() => {
            adjustFontSizeToFitContainer();
        }, 0);
        window.addEventListener('resize', adjustFontSizeToFitContainer);
    });
</script>

… und dann braucht ihr nur noch ein paar Zeilen CSS:

.stretch {
  width: 100%;
  text-align: center;
  overflow: hidden;
}

.stretch h1, .stretch h2, .stretch h3 {
  margin: 0;
  padding: 0;
  white-space: nowrap;
  display: inline-block;
}

Beispiel 2:

Egal wie viele Zeichen die Überschrift hat!

Beispiel 3:

Wenig Zeichen!