Ukuran maksimum sebaris - Trik CSS

max-inline-sizeadalah sifat logik dalam CSS yang menentukan lebar maksimum elemen ketika writing-modemendatar, atau ketinggian maksimum elemen ketika writing-modetegak.

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

Seperti yang anda sangka dengan contoh di atas, writing-modeharta itu mengubah orientasi aliran teks dan susun atur sebanyak 90 darjah.

Sebab utama untuk mengubah orientasi, selain daripada membuat reka bentuk mewah, adalah untuk mengakomodasi pengantarabangsaan di laman web. Banyak skrip Asia Timur seperti Cina, Jepun, dan Korea boleh ditulis secara mendatar atau menegak. Dengan menggunakan sifat logik, kami dapat memberikan arah ukuran elemen yang betul berdasarkan mod penulisan pengguna.

Jen Simmons mempunyai artikel dan persembahan yang lebih mendalam mengenai mod penulisan CSS.

Tidak bolehkah kita menggunakan `max-width`harta itu?

Ya! Tetapi jika anda tidak menyokong Internet Explorer, tidak ada alasan untuk tidak menggunakannya max-inline-size. max-widthadalah dimensi fizikal, jadi apabila mod penulisan berubah, elemen menjaga ukuran lebar mendatarnya, memecah susun atur ketika disusun menjadi menegak. Sifat logik, seperti max-inline-size, dapat bertindak balas terhadap perubahan tersebut dan menerapkan ukuran dalam orientasi yang tepat.

Sintaks

max-inline-size: ;

Permulaan: auto
Berlaku untuk: sama seperti heightdanwidth
Diwarisi: tidak
Peratusan: untuk harta fizikal yang sepadan
Nilai dikira: sama dengan heightdanwidth
Jenis animasi: mengikut jenis nilai yang dikira

Nilai

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

Ketika writing-modediatur ke vertical-rl, konten akan berputar, mengubah tata letak. Lebar max-widthkotak akan berputar dengan kandungannya. Tetapi max-inline-sizepintar! Ia membiarkan lebarnya tidak berubah, tanpa mengira writing-modenilainya. Togol writing-modedalam demo berikut untuk melihat perbezaan antara keduanya.