Į resizeturto valdymo, ar ir kaip elementas gali būti keičiamas vartotojas spustelėdami ir vilkdami apatiniame dešiniajame kampe elemento.
.module ( resize: both; )Labai svarbu žinoti: resize nieko nedaro, nebent overflownuosavybė yra nustatyta kaip kažkas kita visible, o tai yra jo pradinė vertė daugumai elementų.
Taip pat verta žinoti, kad „Firefox“ leis pakeisti elemento dydį, mažesnį nei jo pradinis dydis. „Webkit“ naršyklės neleis keisti elemento dydžio, kad jis būtų mažesnis, tik didesnis (abiem aspektais).
Vertybės
none: elemento dydis nėra keičiamas. Tai yra pradinė daugelio elementų vertė.textareaElementas yra labiausiai paplitęs išimtis-daugelyje naršyklių numatytąjąresizevertę yraboth.both: vartotojas gali pakeisti elemento aukščio ir (arba) pločio dydį.horizontal: vartotojas gali pakeisti elemento dydį horizontaliai (padidinti plotį).vertical: vartotojas gali pakeisti elemento dydį vertikaliai (padidindamas aukštį).inherit: elementas paveldi savo pirminio dydžio dydį.
Kai elemento dydį galima keisti, apatiniame kampe jis turi šiek tiek vartotojo sąsajos rankenos. Rankena rodoma puslapio elementų dešinėje, kai puslapis directionyra nustatytas iš ltrkairės į dešinę, o kairėje - iš rtldešinės į kairę.
Demonstracija
Šiame demonstraciniame elemente, kurio dydį galima keisti, yra pastraipa. Spustelėkite mygtukus, kad išbandytumėte skirtingas resizevertes.
Peržiūrėkite „CSS-Tricks“ („@ css-tricks“) „Pen Resize Demo“ demonstraciją „CodePen“.
Susijęs
overflowdirection
Daugiau informacijos
- Spec
- „Mozilla Docs“
- David Walsh straipsnis
- „Textarea“ gudrybės
Naršyklės palaikymas
Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.
Darbalaukis
| „Chrome“ | „Firefox“ | T.Y | Briauna | „Safari“ |
|---|---|---|---|---|
| 4 | 4 * | Ne | 79 | 4 |
Mobilusis / planšetinis kompiuteris
| „Android Chrome“ | „Android Firefox“ | „Android“ | „iOS Safari“ |
|---|---|---|---|
| 88 | 85 | 81 | Ne |