Max-inline-size - CSS-triki | Almanah CSS 2025

max-inline-sizeje logična lastnost v CSS, ki definira največjo širino elementa, ko writing-modeje vodoravno, ali največjo višino elementa, ko writing-modeje navpično.

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

Kot ste morda že uganili v zgornjem primeru, writing-modelastnost spremeni usmerjenost besedila in toka postavitve za 90 stopinj.

Glavni razlog za spremembo usmeritve, poleg ustvarjanja modnih oblik, je prilagoditi internacionalizacijo 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.

Ali ne moremo kar uporabiti `max-width`posesti?

Ja! Če pa Internet Explorerja ne podpirate, ni razloga, da ga ne bi uporabili max-inline-size. max-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 max-inline-sizelahko odzovejo na te spremembe in velikost uporabijo v ustrezni usmerjenosti.

Sintaksa

max-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 */ max-inline-size: 250px; max-inline-size: 5rem;   /* Percentage values */ max-inline-size: 75%;   /* Keyword values */ max-inline-size: auto; max-inline-size: fit-content(5rem); max-inline-size: max-content; max-inline-size: min-content;   /* Global values */ max-inline-size: inherit; max-inline-size: initial; max-inline-size: unset;

Demo

Ko writing-modeje nastavljeno na vertical-rl, se bo vsebina zasukala in spremenila postavitev. Širina max-widthpolja se bo zasukala z vsebino. Ampak max-inline-sizepametno je! Širino pusti v taktu, ne glede na writing-modevrednost. Preklopite writing-modena naslednji demo videti razliko med njima.