Code Block Pro: Oprava zalamovania riadkov (CSS Fix)

Poznáš to. Máš nadupaný web, všetko lícuje na pixel presne, a potom potrebuješ vložiť kus kódu – napríklad dlhý Bash one-liner alebo cestu k súboru. Použiješ plugin Code Block Pro (čo je inak skvelá voľba pre syntax highlighting), ale výsledok ťa nemilo prekvapí.

Dlhý riadok sa nezalomí. Namiesto toho buď vytvorí škaredý horizontálny posuvník (scrollbar), alebo v horšom prípade „pretečie“ kontajner a rozbije celý layout, hlavne na mobilných zariadeniach.

Prečo sa to deje? Štandardný tag <pre>, ktorý sa používa na formátovanie kódu, má zvyčajne nastavené správanie white-space: pre. To znamená: „Zachovaj medzery a nezalamuj, kým tam nie je enter.“

Riešenie: Vynútenie zalamovania cez Custom CSS

Aby sme donútili Code Block Pro rešpektovať šírku rodičovského elementu a pekne zalomiť dlhé reťazce (napríklad URL adresy alebo cesty v Linuxe), musíme prepísať jeho defaultné štýly pomocou !important.

Tento kód vlož do svojich globálnych štýlov (v Oxygen Builderi: Manage > Stylesheets) alebo do Customizeru.

CSS

/* Vynútenie zalamovania riadkov pre Code Block Pro */
.wp-block-kevinbatdorf-code-block-pro pre,
.wp-block-kevinbatdorf-code-block-pro code,
.wp-block-kevinbatdorf-code-block-pro .line {
    white-space: pre-wrap !important;      /* Prikáže zalomiť text */
    word-break: break-word !important;     /* Zalomenie aj v strede dlhého slova/cesty */
    overflow-wrap: break-word !important;  /* Moderná verzia word-wrap */
    max-width: 100%;                       /* Poistka, aby to nepretieklo kontajner */
}

/* Fix pre riadky, ktoré majú nastavené inline-block (vidím to v tvojom screenshote) */
.wp-block-kevinbatdorf-code-block-pro pre code .line {
    display: block !important;             /* Zmeníme z inline-block na block, aby to rešpektovalo šírku */
    width: 100% !important;
}

/* Vynútenie zalamovania riadkov pre Code Block Pro */
.wp-block-kevinbatdorf-code-block-pro pre,
.wp-block-kevinbatdorf-code-block-pro code,
.wp-block-kevinbatdorf-code-block-pro .line {
    white-space: pre-wrap !important;      /* Prikáže zalomiť text */
    word-break: break-word !important;     /* Zalomenie aj v strede dlhého slova/cesty */
    overflow-wrap: break-word !important;  /* Moderná verzia word-wrap */
    max-width: 100%;                       /* Poistka, aby to nepretieklo kontajner */
}

/* Fix pre riadky, ktoré majú nastavené inline-block (vidím to v tvojom screenshote) */
.wp-block-kevinbatdorf-code-block-pro pre code .line {
    display: block !important;             /* Zmeníme z inline-block na block, aby to rešpektovalo šírku */
    width: 100% !important;
}

Čo presne tento kód robí? (Technické vysvetlenie)

white-space: pre-wrap: Toto je kľúčová vlastnosť. Hovorí prehliadaču: „Zachovaj formátovanie kód (medzery, tabulátory), ale ak narazíš na okraj kontajnera, zalom riadok na nový.“
word-break: break-word: Bežne sa text zalamuje len na medzerách. Ale čo ak máš cestu ako /var/log/ispconfig/httpd/veľmi/dlhá/cesta/bez/medzier? Tento príkaz dovolí prehliadaču „rozťať“ slovo kdekoľvek, aby sa zmestilo na obrazovku.
display: block na .line: Code Block Pro niekedy renderuje jednotlivé riadky kódu ako inline-block. Pri responzivite to môže robiť problémy. Zmenou na block zabezpečíme, že každý riadok využije plnú šírku a bude sa správať predvídateľne.