Design Meets Code

Design Meets Code

WordPress · PrestaShop

  • Startseite
  • WordPress
  • PHP / Datenbanken
  • Ubuntu
  • Prestashop
  • Verschiedenes
  • Grafik
  • Glossar
You are here: Home / Allgemein / CSS: Automatische Silbentrennung in einzelnen Wörtern verhindern

CSS: Automatische Silbentrennung in einzelnen Wörtern verhindern

7. Juni 2017 4 Comments

Mit dem CSS Befehl hyphens: auto; werden Worte automatisch getrennt. Dies kann in einzelnen Fällen nicht erwünscht sein, z.B. wenn bei einer längeren Überschrift nur die letzte Silbe in die nächste Zeile rutscht und es besser aussehen würde, wenn das Wort insgesamt in der zweiten Zeile erscheint.

Hier hilft der breitenlose Verbinder ‍

Der breitenlose Verbinder ist quasi das Gegenstück zu ­

Mit ­ kann man vorgeben, wo ein Wort getrennt werden soll.
Mit ‍ wird eine Trennung verhindert

Das Wort Haltbarkeitsdatum würde ohne den breitenlosen Verbinder vier Trennmöglichkeiten besitzen: Halt-bar-keits-da-tum

Mit dem breitenlosen Verbinder kann man diese Trennmöglichkeiten einschränken oder ganz ausschließen: Halt‍bar‍keits-da‍tum schränkt die Trennmöglichkeit ein auf Haltbarkeits-datum

Das html Zeichen ‍ wird nach Eingabe im Browser nicht ausgegeben und ist hier nur zur Demonstration sichtbar gemacht.

Filed Under: Allgemein Tagged With: CSS

Comments

  1. Bernhard says

    30. August 2017 at 13:10

    Danke, das genau mit dem ‍ hat mir noch fehlt:
    Ganz gut zu gebrauchen z. B. bei Wörtern die mit „ei“ anfangen und da getrennt werden. ei- ner (Silbentrennung bei Zeilenumbruch) liest sich bei der automatischen Silbentrennung extrem mies.

    Antworten
  2. Bernhard says

    30. August 2017 at 13:11

    meinte mit dem & z w j ;
    Zusammengeschrieben hat es mir der Editor weggeschluckt.

    Antworten
  3. Martin says

    9. Januar 2024 at 3:54

    Nach einer etwas schwierigen Suche bin ich zum Glück auch hier gelandet. Ich war mir sicher, dass es eine Lösung für mein Problem geben muss. Das Wort „erfolgreich“ wurde immer falsch getrennt, nämlich als „erfol-greich“. Auch das Einfügen des überall gut dokumentierten Soft-Hyphens ­ half nicht. Erst der hier vorgestellte breitenlose Verbinder ‍ brachte die korrekte Trennung und im HTML-Code sieht das jetzt so aus: er­fol‍g­reich. Vielen Dank!

    Antworten
  4. Martin says

    9. Januar 2024 at 3:57

    Haha, selbes Problem wie mein Vorgänger:

    ….sieht das jetzt so aus: er& shy;fol& zwj;g& shy;reich.

    Antworten

Schreibe einen Kommentar Antwort abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Anzeige

Themen

Apache BuddyPress chmod chown Code Snippets Concatenation Operator Conditional Statement Custom Post Types Datenbank Email Enfold Escape Zeichen Foren genesis Grid View htaccess JavaScript Layout Builder List View Medien MegaShop Mitgliederbereich MySQL PHP PHP Anfänger PHP Variablen Plugins Prestashop Prestashop 1.5 Prestashop 1.6 Prestashop 8 Prestashop Module Registrierung RSS Feed s2member Schreibrechte Server ssl Strings Tipps Windows Windows 10 WooCommerce WooCommerce Sortierung WordPress
Anzeige

Letzte Kommentare

  • Martin zu CSS: Automatische Silbentrennung in einzelnen Wörtern verhindern
  • Martin zu CSS: Automatische Silbentrennung in einzelnen Wörtern verhindern
  • Klaus zu Woocommerce: Shop Seiten neu generieren
  • Thomas zu WordPress: Einzelne Kategorien aus dem RSS Feed ausschließen
  • Bernhard zu CSS: Automatische Silbentrennung in einzelnen Wörtern verhindern

Informationen

  • Kontakt
  • Datenschutzerklärung
  • Impressum
  • Cookie-Richtlinie (EU)
  • Kontakt
  • Datenschutzerklärung
  • Impressum
  • Cookie-Richtlinie (EU)
Anzeige