Wie kann ich die Silbentrennung auf meiner Webseite einstellen?
Es kann passieren, dass vor allem Überschriften bei den verschiedenen Spalten-Ansichten und besonders auf Smartphone- oder Tablet-Ansichten unschön getrennt werden. Manchmal kommt sieht es so aus, als würde der Titel auch rechts aus einer Box herauslaufen, ohne überhaupt getrennt zu werden.
INHALTSVERZEICHNIS
1. Silbentrennung aktivieren
Mit Hilfe des folgenden CSS-Codes kannst du die Silbentrennung auf deiner Webseite "aktivieren":
/* Silbentrennung aktivieren */
body, a, abbr, acronym, address, applet, b, big, blockquote, body, center, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, tt, u, ul, var {
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
Kopiere den Code und füge ihn einfach im Backend unter "Design" > "Theme Optionen" ganz am Ende der Seite bei Eigenes CSS ein.
Der Code greift sowohl beim Fließtext sowie auch bei den Überschriften 1-5.
2. Silbentrennung deaktivieren
Mit Hilfe des folgenden CSS-Codes kannst du die Silbentrennung auf deiner Webseite unterbinden:
/* Silbentrennung deaktivieren */
body, a, abbr, acronym, address, applet, b, big, blockquote, body, center, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, tt, u, ul, var {
-webkit-hyphens: none !important;
-moz-hyphens: none !important;
-ms-hyphens: none !important;
hyphens: none !important;
}
Kopiere den Code und füge ihn einfach im Backend unter "Design" > "Theme Optionen" ganz am Ende der Seite bei Eigenes CSS ein.
Der Code greift sowohl beim Fließtext sowie auch bei den Überschriften 1-5.
3. Silbentrennung nur auf dem Smartphone deaktivieren
Manchmal ist es auch sinnvoll, die Silbentrennung ausschließlich auf dem Handy zu unterbinden. Nutze dafür diesen CSS-Code:
/* Silbentrennung deaktivieren auf Handy */
@media only screen and (max-width: 800px) {
body, a, abbr, acronym, address, applet, b, big, blockquote, body, center, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, tt, u, ul, var {
-webkit-hyphens: none !important;
-moz-hyphens: none !important;
-ms-hyphens: none !important;
hyphens: none !important;
}
}
Kopiere den Code und füge ihn einfach im Backend unter "Design" > "Theme Optionen" ganz am Ende der Seite bei Eigenes CSS ein.
Der Code greift sowohl beim Fließtext sowie auch bei den Überschriften 1-5.