Max-in-size - CSS-trikid | CSS-i almanahh 2025

max-inline-sizeon CSS-is loogiline omadus, mis määrab elemendi maksimaalse laiuse writing-modehorisontaalsuunas või elemendi maksimaalse kõrguse writing-modevertikaalsuunas.

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

Nagu võite arvata ülaltoodud näite põhjal, muudab writing-modeatribuut teksti suuna ja paigutuse voogu 90 kraadi võrra.

Peamine põhjus orientatsiooni muutmiseks, välja arvatud väljamõeldud kujunduste loomine, on kohanemisele vastama rahvusvahelistumine. Paljusid Ida-Aasia skripte, näiteks hiina, jaapani ja korea keelt, saab kirjutada horisontaalselt või vertikaalselt. Kasutades loogilisi omadusi, saame kasutaja kirjutamisrežiimi põhjal pakkuda elementide õige suuruse suuna.

Jen Simmonsil on artikkel ja esitlus, mis lähevad sügavamale CSS-i kirjutamisrežiimidesse.

Kas me ei saa `max-width`vara lihtsalt kasutada ?

Jah! Kuid kui te ei toeta Internet Explorerit, pole põhjust max-inline-sizeselle asemel mitte kasutada . max-widthon füüsiline mõõde, nii et kui kirjutamisrežiim muutub, hoiab element horisontaalse laiuse suurust, purustades paigutuse vertikaalseks seadistamisel. Nagu loogilised omadused, max-inline-sizevõivad need muutused reageerida ja suurust õiges asendis rakendada.

Süntaks

max-inline-size: ;

Esialgne: auto
Kehtib: sama mis heightjawidth
Päritud: ei
Protsendid: nagu ka vastava füüsilise omaduse osas
Arvutatud väärtus: sama mis heightjawidth
Animatsiooni tüüp: arvutatud väärtuse tüübi järgi

Väärtused

/* 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

Kui väärtuseks writing-modeon seatud vertical-rl, muutub sisu, muutes paigutust. max-widthKarbi laius pöörleb koos sisuga. Aga max-inline-sizeon tark! See jätab oma laiuse taktitundele, olenemata writing-modeväärtusest. writing-modeNende kahe erinevuse nägemiseks lülitage sisse järgmine demo.