baris textarea, dan atribut cols di CSS


Jawaban:


107

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>

12
Sesuai jawaban user2928048 di bawah ini, jika Anda menggunakan "em" daripada "px" maka Anda dapat menentukan lebar dan tinggi karakter seperti yang Anda lakukan dengan atribut 'rows' dan 'cols'. Bahkan bekerja dengan IE6 saya percaya.
Swanny

Meskipun saya setuju dengan penggunaan 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.
akinuri

Saya mungkin salah, tetapi px tidak bekerja untuk saya; mereka melakukannya.
Jesse Steele

309
<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 .


39
Untuk lebih tepatnya, Anda harus mempertimbangkan 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.
nalply

2
@ jelas solusi Anda sudah benar. Masalahnya adalah 4em = 4 x ukuran font yang tidak mempengaruhi padding maupun line-height
Nicholas

3
Jika Anda memiliki ukuran kotak properti: kotak konten; Anda tidak perlu khawatir tentang bantalan, sehingga Anda tetap hanya dengan ketinggian garis.
mikewasmike

2
Nice @nalply, terima kasih atas pendekatannya. Menambahkan sedikit ke jawaban Anda, fungsi calc () CSS3 dapat memudahkan perhitungan lebar / tinggi: katakanlah saya memiliki textarea dengan padding-top dan padding-bottom 4px, dan saya ingin menjadi 3 baris tinggi, tinggi akan menjadi height: calc(3em + 8px);.
GBU

Sementara rowsatribut (agak) dapat diandalkan, saya tidak akan bergantung pada colsatribut kecuali saya menggunakan font monospace pada textarea. Lihat @ biola AlexanderScholz yang diperbarui .
akinuri

16

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;
}

4

Sejauh yang saya tahu, Anda tidak bisa.

Selain itu, toh itu bukan untuk CSS. CSS untuk gaya dan HTML untuk markup.


1
CSS adalah untuk menata representasi visual suatu elemen. Ini termasuk lebar dan tinggi dari suatu textarea.
Sampson

Mereka tidak sama, browser memperhitungkan ketinggian teks pada setiap baris termasuk 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.
William Isted

0

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 .

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.