/** * OX House — site-wide typography & line-breaking rules. * * Goals: * - long compound words (typical for German) wrap at humane points * using the browser's hyphenation dictionary based on . * - very long unbreakable strings (URLs, IDs) still wrap as a fallback. * - certain elements where hyphens look bad (code, buttons, menus) opt out. * * Notes: * - hyphens is an inherited CSS property; we set it on and then * explicitly disable it where unwanted. * - hyphenate-limit-chars="6 3 3" — don't hyphenate words shorter than 6 chars * and require at least 3 chars on each side of the break. */ body { -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; -webkit-hyphenate-limit-before: 3; -webkit-hyphenate-limit-after: 3; hyphenate-limit-chars: 6 3 3; overflow-wrap: break-word; word-wrap: break-word; } /* * Opt-out for elements where hyphenation would look wrong: * - code blocks, technical text * - form controls (browsers usually don't hyphenate them anyway, be explicit) * - navigation, menu items * - call-to-action buttons (keep them legible as one block) * - tags / pills / counters / breadcrumbs * - anything explicitly opted out by the .no-hyphens helper class */ body :where(code, kbd, samp, var, tt, pre, address), body :where(button, input, select, textarea, [type="button"], [type="submit"], [type="reset"]), body :where(.elementor-button, .elementor-button-text, .ox-btn, .ox-btn .elementor-button), body :where(nav a, .menu-item, .menu-item > a, .elementor-nav-menu a, .elementor-icon-list-item, .elementor-icon-list-text), body :where(.breadcrumbs, .breadcrumb, .breadcrumb-item, .breadcrumbs a), body :where(.tag, .tags, .pill, .badge, .label, .counter, .count), body :where([class*="elementor-counter"]), body :where(.no-hyphens, [data-no-hyphens]) { -webkit-hyphens: manual; -moz-hyphens: manual; -ms-hyphens: manual; hyphens: manual; } /* Tables: allow hyphens in cell text, but never break the header row labels apart. */ body :where(thead th) { -webkit-hyphens: manual; -moz-hyphens: manual; -ms-hyphens: manual; hyphens: manual; overflow-wrap: normal; }