Velikost vrstice - CSS-triki

Anonim

inline-sizeje logična lastnost, ki definira širino elementa, ko je način pisanja vodoraven, ali višino elementa, če writing-modeje navpično.

.element ( inline-size: 700px; writing-mode: vertical-lr; )

Kot ste morda že uganili v zgornjem primeru, writing-modelastnost spremeni usmerjenost besedila in toka postavitve za 90 stopinj. Dva glavna razloga, zakaj bi to želeli storiti.

Najprej boste kot izbiro zasnove morda želeli prikazati navpično besedilo na elementu, recimo glavo:

Drugi - in verjetno najpomembnejši - razlog, da boste morda želeli uporabiti logično lastnost, kot je velikost vrstice, je prilagoditev internacionalizacije na spletnem mestu. Številne vzhodnoazijske pisave, kot so kitajska, japonska in korejska, lahko pišemo vodoravno ali navpično. Z uporabo logičnih lastnosti lahko na podlagi uporabnikovega načina pisanja zagotovimo pravilno smer velikosti elementov.

Jen Simmons ima članek in predstavitev, ki se poglobita v načine pisanja CSS.

Zakaj ne moremo preprosto uporabiti 'stare zaupne widthnepremičnine?

Ti lahko! Vendar boste morda želeli poseči po njem, inline-sizeče vas skrbi kontekst vaše vsebine, ki se spreminja glede na uporabnikov jezik. widthje fizična dimenzija, zato element, ko se način pisanja spremeni, ohrani svojo vodoravno velikost in razbije postavitev, ko je postavljen navpično. Logične lastnosti se na primer inline-sizelahko odzovejo na te spremembe in uporabijo širino v pravi smeri.

Če je na primer element odstavka širok z uporabo širine 400 slikovnih pik, ko je način pisanja nastavljen na vertical-lr, se vsebina zasuka in spremeni postavitev, vendar bo ta odstavek ostal širok 400 slikovnih pik namesto 400 slikovnih pik.

Poglej to? No, inline-sizepametno je! Od širine do višine se spreminja, odvisno od writing-modevrednosti.

Sintaksa

inline-size:
  • Začetno: auto
  • Velja za: enako kot heightinwidth
  • Podedovano: ne
  • Odstotki: kot za ustrezno fizično lastnost
  • Izračunana vrednost: enako kot heightinwidth
  • Vrsta animacije: po izračunani vrednosti

Vrednote

/* Length values */ inline-size: 250px; inline-size: 5rem; 
 /* Percentage values */ inline-size: 75%; 
 /* Keyword values */ inline-size: auto; inline-size: fit-content(5rem); inline-size: max-content; inline-size: min-content; 
 /* Global values */ inline-size: inherit; inline-size: initial; inline-size: unset;
  • auto: Velikost vrstice elementa se bo držala velikosti nadrejenega elementa.
  • fit-content(): Ta funkcija omogoča, da vsebnik raste do želene velikosti, nato pa zavije besedilo in učinkovito pripenja vsebino na določeno vrednost velikosti. Uporablja se lahko na mrežnih zabojnikih, pa tudi pri dimenzioniranju škatel, in medtem ko kanijus močno podpira funkcijo z vgrajeno velikostjo, je bilo naše testiranje manj prepričljivo. To je lahko posledica stanja delovnega osnutka specifikacije modula za dimenzioniranje polja nivoja 3.
  • max-content: Lastna prednostna širina, kar pomeni, da element raztegne besedilo, dokler je to mogoče, in bo polje tako dolgo kot besedilo.
  • min-content: Notranja minimalna širina, kar pomeni, da se polje elementa zmanjša na najmanjšo velikost njegove vsebine. Polje bo velikosti največjega niza besedila.

Demo

Podpora brskalnika

IE Rob Firefox Chrome Safari Opera
Ne 79+ 41+ 57 12,1+ 44+
Android Chrome Android Firefox Brskalnik Android iOS Safari Opera Mobile
85+ 79+ 81+ 12,2+ 59+
Vir: kanius

Upoštevajte, da se podpora za uporabo naslednjih funkcij lahko razlikuje od podpore lastnosti:

  • fit-content()
  • max-content()
  • min-content()

Več informacij

  • Specifikacija logičnih lastnosti in vrednosti CSS 1. stopnje (urednikov osnutek)
  • Dokumentacija MDN
  • Logične lastnosti CSS-ja (CSS-triki)
  • Razumevanje logičnih lastnosti in vrednot (Smashing Magazine)
  • Logične lastnosti CSS (Adrian Roselli)
  • Minimalna in največja velikost vsebine v mreži CSS (Jen Simmons, video)
  • Dvosmerna horizontalna pravila v CSS (Hussein Al Hammad)