Jawaban:
widthdan heightdigunakan saat menuju rute css.
<!DOCTYPE html>
<html>
<head>
<title>Setting Width and Height on Textareas</title>
<style>
.comments { width: 300px; height: 75px }
</style>
</head>
<body>
<textarea class="comments"></textarea>
</body>
</html>emuntuk menentukan ketinggian, saya ragu bahwa itu dapat digunakan untuk menentukan lebar. Ini mungkin bekerja dengan font monospace (setelah mencari tahu lebar: rasio tinggi karakter dan memodifikasi nilai lebar sesuai), dan hanya itu. Kecuali monospace, lebar karakter tidak tetap, jadi saya tidak berpikir ematau colsatribut dapat membantu ketika menentukan lebar.
<textarea rows="4" cols="50"></textarea>Itu sama dengan:
textarea {
height: 4em;
width: 50em;
}di mana 1em setara dengan ukuran font saat ini, sehingga membuat area teks 50 chars lebar. lihat di sini .
paddingdan line-heightmemperhitungkannya. Katakanlah Anda memiliki padding setengah em di bagian atas dan di bagian bawah dan ketinggian garis 1.2em, maka tinggi untuk 4 baris adalah 1 + 4 * 1.2 = 5.8em.
height: calc(3em + 8px);.
rowsatribut (agak) dapat diandalkan, saya tidak akan bergantung pada colsatribut kecuali saya menggunakan font monospace pada textarea. Lihat @ biola AlexanderScholz yang diperbarui .
Saya pikir kamu tidak bisa. Saya selalu pergi dengan tinggi dan lebar.
textarea{
width:400px;
height:100px;
}hal yang menyenangkan tentang melakukannya dengan cara CSS adalah Anda dapat benar-benar menatanya. Sekarang Anda dapat menambahkan hal-hal seperti:
textarea{
width:400px;
height:100px;
border:1px solid #000000;
background-color:#CCCCCC;
}Sejauh yang saya tahu, Anda tidak bisa.
Selain itu, toh itu bukan untuk CSS. CSS untuk gaya dan HTML untuk markup.
line-height, paddingpada wadah (tidak menghitung ketinggian berdasarkan box-sizing), bahkan dengan mempertimbangkan berbagai aspek rasio font yang digunakan untuk memastikan kotak teks menampilkan nomor yang ditetapkan baris teks yang tidak dapat Anda capai dengan menggunakan tinggi css.
Saya hanya ingin memposting demo menggunakan calc () untuk mengatur baris / tinggi, karena tidak ada yang melakukannya.
body {
/* page default */
font-size: 15px;
line-height: 1.5;
}
textarea {
/* demo related */
width: 300px;
margin-bottom: 1em;
display: block;
/* rows related */
font-size: inherit;
line-height: inherit;
padding: 3px;
}
textarea.border-box {
box-sizing: border-box;
}
textarea.rows-5 {
/* height: calc(font-size * line-height * rows); */
height: calc(1em * 1.5 * 5);
}
textarea.border-box.rows-5 {
/* height: calc(font-size * line-height * rows + padding-top + padding-bottom + border-top-width + border-bottom-width); */
height: calc(1em * 1.5 * 5 + 3px + 3px + 1px + 1px);
}<p>height is 2 rows by default</p>
<textarea>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
<p>height is 5 now</p>
<textarea class="rows-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
<p>border-box height is 5 now</p>
<textarea class="border-box rows-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>Jika Anda menggunakan nilai besar untuk bantalan (mis. Lebih besar dari 0,5em), Anda akan mulai melihat teks yang meluap pada area konten (-box), dan itu mungkin membuat Anda berpikir bahwa tingginya bukan x baris ( yang Anda tetapkan), tetapi itu benar. Untuk memahami apa yang terjadi, Anda mungkin ingin memeriksa Model kotak dan halaman ukuran kotak .