inline-sizeir loģiska īpašība, kas nosaka elementa platumu, kad rakstīšanas režīms ir horizontāls, vai elementa augstumu, kad tas writing-modeir vertikāls.
.element ( inline-size: 700px; writing-mode: vertical-lr; )Kā jūs, iespējams, nojautāt pēc iepriekš minētā piemēra, writing-moderekvizīts maina teksta orientāciju un izkārtojuma plūsmu par 90 grādiem. Ir divi galvenie iemesli, kāpēc jūs vēlaties to darīt.
Pirmkārt, kā dizaina izvēli, iespējams, vēlēsities attēlot vertikālu tekstu elementā, teiksim galveni:
Otrais - un, iespējams, vissvarīgākais - iemesls, kāpēc jūs varētu vēlēties izmantot tādu loģisku rekvizītu kā teksta izmērs, ir pielāgot vietnei internacionalizāciju. Daudzus Austrumāzijas rakstus, piemēram, ķīniešu, japāņu un korejiešu, var rakstīt horizontāli vai vertikāli. Izmantojot loģiskās īpašības, mēs varam nodrošināt pareizu elementu lieluma virzienu, pamatojoties uz lietotāja rakstīšanas režīmu.
Jen Simmons ir raksts un prezentācija, kas iedziļinās CSS rakstīšanas režīmos.
Kāpēc mēs nevaram izmantot tikai uzticamo widthīpašumu?
Jūs varat! Tomēr jūs varētu vēlēties to meklēt, inline-sizeja jūs uztrauc satura konteksta maiņa, pamatojoties uz lietotāja valodu. widthir fiziska dimensija, tādēļ, mainoties rakstīšanas režīmam, elements saglabā horizontālo platuma lielumu, sadalot izkārtojumu, kad tas ir iestatīts kā vertikāls. Loģiskās īpašības, piemēram inline-size, var reaģēt uz šīm izmaiņām un piemērot platumu pareizajā virzienā.
Piemēram, ja rindkopas elements ir 400 pikseļu plats, izmantojot platumu, kad rakstīšanas režīms ir iestatīts uz vertical-lr, saturs tiks pagriezts, mainot izkārtojumu, bet šī rindkopa paliks 400 pikseļu plata, nevis 400 pikseļu augsta.
Redzi to? Nu, inline-sizeir gudrs! Tas mainās no platuma uz augstumu, atkarībā no writing-modevērtības.
Sintakse
inline-size: - Sākotnējais:
auto - Attiecas uz: tāds pats kā
heightunwidth - Mantots: nē
- Procenti: tāpat kā attiecīgajam fiziskajam īpašumam
- Aprēķinātā vērtība: tāda pati kā
heightunwidth - Animācijas tips: pēc aprēķinātās vērtības veida
Vērtības
/* 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: Elementa teksta izmērs būs saistīts ar tā pamatelementa lielumu.fit-content(): Šī funkcija ļauj konteineram izaugt līdz vajadzīgajam izmēram, pēc tam izveidojiet teksta aptinumu, efektīvi nostiprinot saturu līdz norādītajai izmēra vērtībai. To var izmantot režģa konteineros, kā arī kastes izmēros, un, lai gan caniuse parāda spēcīgu atbalstu funkcijai ar inline izmēru, mūsu pārbaude nebija tik pārliecinoša. Tas varētu būt saistīts ar kastes lieluma moduļa 3. līmeņa spec darba statusa statusu.max-content: Iekšējais vēlamais platums, kas nozīmē, ka elements izstiepj tekstu tik ilgi, cik tas iespējams, un padarīs lodziņu tikpat garu kā teksts.min-content: Iekšējais minimālais platums, kas nozīmē, ka elementa lodziņš tiek samazināts līdz tā minimālajam izmēram. Lodziņš būs lielākās teksta virknes lielums.
Demonstrācija
Pārlūkprogrammas atbalsts
| IE | Mala | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| Nē | 79+ | 41+ | 57 | 12.1+ | 44+ |
| Android Chrome | Android Firefox | Android pārlūks | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| 85+ | 79+ | 81+ | 12.2+ | 59+ |
Ņemiet vērā, ka atbalsts šo funkciju izmantošanai var atšķirties no īpašuma atbalsta:
fit-content()max-content()min-content()
Vairāk informācijas
- CSS loģisko īpašību un vērtību 1. līmeņa specifikācija (redaktora melnraksts)
- MDN dokumentācija
- CSS loģiskās īpašības (CSS-triki)
- Izpratne par loģiskajām īpašībām un vērtībām (žurnāls Smashing)
- CSS loģiskās īpašības (Adrians Roselli)
- Minimālais un maksimālais satura lielums CSS tīklā (Jen Simmons, video)
- Divvirzienu horizontālie noteikumi CSS (Hussein Al Hammad)