Risposte:
widthe heightvengono utilizzati quando si percorre il percorso 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>emper specificare l'altezza, dubito che possa essere utilizzato per specificare la larghezza. Esso potrebbe funzionare con font a spaziatura fissa (dopo capire il rapporto larghezza: altezza dei caratteri, modificando il valore di larghezza corrispondente), e basta. Tranne la monospazio, la larghezza dei caratteri non è fissa, quindi non credo emche l' colsattributo possa essere d'aiuto quando si specifica la larghezza.
<textarea rows="4" cols="50"></textarea>È equivalente a:
textarea {
height: 4em;
width: 50em;
}dove 1em equivale alla dimensione del carattere corrente, quindi allarga l'area del testo di 50 caratteri. vedi qui .
paddinge line-heightin considerazione. Supponi di avere un'imbottitura di mezzo em in alto e in basso e un'altezza della linea di 1,2em, quindi l'altezza per 4 righe sarebbe 1 + 4 * 1,2 = 5,8em.
height: calc(3em + 8px);.
rowsattributo è (in qualche modo) affidabile, non farei affidamento sull'attributo a colsmeno che non stia usando i caratteri monospace nella textarea. Guarda il violino aggiornato di @ AlexanderScholz .
Non penso che tu possa. Vado sempre con altezza e larghezza.
textarea{
width:400px;
height:100px;
}la cosa bella di farlo nel modo CSS è che puoi modellarlo completamente. Ora puoi aggiungere cose come:
textarea{
width:400px;
height:100px;
border:1px solid #000000;
background-color:#CCCCCC;
}Per quanto ne so, non puoi.
Inoltre, non è ciò che CSS è per comunque. CSS è per lo stile e HTML per il markup.
line-height, paddingsul contenitore (non calcolando un'altezza in base a box-sizing), anche tenendo conto delle diverse proporzioni dei caratteri utilizzati per assicurarsi che la casella di testo mostri il numero impostato di righe di testo che non è possibile ottenere utilizzando l'altezza css.
Volevo solo pubblicare una demo usando calc () per impostare righe / altezza, poiché nessuno lo ha fatto.
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>Se utilizzi valori elevati per i padding (ad esempio maggiore di 0,5 em), inizierai a vedere il testo che trabocca nell'area del contenuto (-box) e che potrebbe farti pensare che l'altezza non sia esattamente x righe ( che hai impostato), ma lo è. Per capire cosa sta succedendo, potresti voler dare un'occhiata al modello di scatola e alle pagine di dimensionamento .