baris textarea, dan atribut cols di CSS

154

Saya ingin mengatur textarea's rowsdan colsatribut melalui CSS.

Bagaimana saya melakukan ini dalam CSS?

css styling ASD
sumber
A kapan harus menggunakan pertanyaan mana: stackoverflow.com/questions/3896537/…
Ciro Santilli 郝海东 冠状 病 六四 事件 事件

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>
Sampson
sumber
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 .

pengguna2928048
sumber
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;
}
Kode monyet
sumber
4

Sejauh yang saya tahu, Anda tidak bisa.

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

Moulde
sumber
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>
Luaskan cuplikan

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 .

akinuri
sumber