Yanıtlar:
widthve heightcss yoluna giderken kullanılır.
<!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>
emYüksekliği belirtmek için kullanmayı kabul ederken , genişliği belirtmek için kullanılabileceğinden şüpheliyim. Bu olabilir (genişlik fark ettikten sonra: karakterlerin yükseklik oranı ve buna bağlı genişlik değerini değiştirerek) tek aralıklı yazı tipleri ile çalışmak ve bu kadar. Ben sanmıyorum monospacenin dışında, karakter genişlikleri, sabit değildir emveya colsgenişliğini belirtirken nitelik yardımcı olabilir.
<textarea rows="4" cols="50"></textarea>Şuna eşittir:
textarea {
height: 4em;
width: 50em;
}
burada 1em, geçerli yazı tipi boyutuna eşdeğerdir, bu nedenle metin alanını 50 karakter genişliğinde yapın. buraya bakın .
paddingve line-heighthesapta. Üstte ve altta yarım em dolgu ve 1.2em çizgi yüksekliğiniz olduğunu varsayalım, o zaman 4 satır için yükseklik 1 + 4 * 1.2 = 5.8em olacaktır.
height: calc(3em + 8px);.
rowsnitelik (biraz) güvenilirdir, ben güvenmek olmaz colsben textarea üzerinde tek aralıklı yazı tipleri kullanıyorum sürece özniteliği. @ AlexanderScholz'un güncellenmiş kemanına bakın .
Yapabileceğini sanmıyorum. Her zaman yükseklik ve genişlikle gidiyorum.
textarea{
width:400px;
height:100px;
}CSS yolunu yapmanın güzel yanı, onu tamamen şekillendirebilmenizdir. Şimdi aşağıdaki gibi şeyler ekleyebilirsiniz:
textarea{
width:400px;
height:100px;
border:1px solid #000000;
background-color:#CCCCCC;
}Bildiğim kadarıyla yapamazsın.
Ayrıca, CSS ne için olursa olsun. CSS şekillendirme ve HTML biçimlendirme içindir.
line-height, paddingkabın (göre bir yüksekliğe hesaplanması olmamasına box-sizingda metin kutusu görüntüler seti sayıda olduğundan emin olmak için kullanılan yazı tiplerini dikkate farklı boy oranları alarak) css yüksekliğini kullanarak elde edemediğiniz metin satırlarının
Ben sadece kimse / grup, çünkü satır / yükseklik ayarlamak için calc () kullanarak bir demo göndermek istedim .
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>Dolgular için büyük değerler kullanırsanız (örn. 0,5em'den büyük), içerik (-box) alanından taşan metni görmeye başlarsınız ve bu da yüksekliğin tam olarak x satır olmadığını düşünmenize neden olabilir ( ayarlayın), ama öyle. Neler olup bittiğini anlamak için Kutu modeli ve kutu boyutlandırma sayfalarına göz atmak isteyebilirsiniz .