26. Februar 2023

Bestimmte Wörter NICHT trennen.

Mit der Einführung von CSS3 vor einigen Jahren war es endlich möglich lange Wörter in Texten automatisch trennen zu lassen.

p {
    -webkit-hyphens: auto;
    hyphens: auto;
}

Häufig führt diese Funktion jedoch zu unerwünschten Ergebnissen, insbesondere wenn z.B. Markennamen getrennt werden, die nicht getrennt werden sollen. Das lässt sich mit folgendem JavaScript (& CSS) einfach verhindern:

var regex = /(Bittenichttrennen|Dashierauchnicht)/g;

$('div').each(function() {
    var $this = $(this);
    var text = $this.text();
    if (regex.test(text)) { $this.html($this.html().replace(regex, '<span class="no-hyphens">$1</span>')); }
});

.no-hyphens {
    -webkit-hyphens: none;
    hyphens: none;
    word-wrap: break-word;
}

---

CSS, JavaScript

---

---

Nächster Artikel
Warum man beim Pflegen einer Website unbedingt auch die Bildgrößen im Blick behalten sollte.