Zalomení tlačítka na více řádků
Jak zabránit nechtěnému zalomení tlačítka na více řádků.
Při formátování odkazu jako tlačítka se může stát nepěkná věc, kdy se tlačítko roztáhne na více řádků:
Nějaký obsah následovaný tlačítkem s hodně dlouhým textem
Řešení
Inline-block
První možnost je nastavit hodnotu vlastnosti display na inline-block:
Nějaký obsah následovaný tlačítkem s hodně dlouhým textem
Řádkově-blokové zobrazení má i výchozí element <button>, proto tímto problémem na rozdíl od řádkového odkazu netrpí.
Zakázat zalamování
Vlastností white-space jde ovlivnit chování bílých znaků – například zrušit možnost zalomení pomocí hodnoty nowrap:
Nějaký obsah následovaný tlačítkem s hodně dlouhým textem
Tento postup trochu zlobí ve staré Opeře 12, kde část tlačítka zůstala na předchozím řádku.
Tvrdá mezera
Tibor Soviš doplnil čistě HTML řešení pomocí tvrdých mezer – entity . Přímo znak nedělitelné mezery jde zapsat na české klávesnici jako Levý Alt + 0160.
Nějaký obsah následovaný tlačítkem s hodně dlouhým textem
Takové řešení ale může být pracnější než prostá CSS deklarace. V Opeře 12 se tento postup projevuje totožným problémem jako white-space: nowrap.
Související články
Možnosti stylování <iframe>
Co lze a nelze u <iframe> ovlivnit pomocí CSS a jak na změnu textu nebo barev.
Zvýraznění aktivní sekce při rolování
Moderní způsoby zvýraznění aktivní položky navigace podle aktuální sekce – CSS i IntersectionObserver.
