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.
Co si myslíte o tomto článku?
Diskuse
Související články
CSS item-pack: balance – vyvážené rozložení flex položek
Vlastnost item-pack: balance rozděluje flex položky rovnoměrně mezi řádky, podobně jako text-wrap: balance vyvažuje řádky textu.
CSS Container Queries – responsivní komponenty
Jak pomocí @container, container-type a container-name vytvářet komponenty, které se přizpůsobí velikosti svého rodiče místo viewportu.
CSS Anchor Positioning – posicování elementů relativně k jiným
Jak pomocí anchor-name, position-anchor a funkce anchor() posicovat elementy relativně k jiným bez JavaScriptu.
Centrování na webových stránkách
Moderní způsoby vertikálního i horizontálního centrování v CSS. Flexbox, Grid, margin auto a další techniky.