Réponses:
widthet heightsont utilisés pour suivre la route 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>empour spécifier la hauteur, je doute qu'il puisse être utilisé pour spécifier la largeur. Cela peut fonctionner avec des polices à espacement fixe (après avoir déterminé le rapport largeur / hauteur des caractères et modifié la valeur de largeur en conséquence), et c'est tout. Sauf espacement fixe, la largeur des caractères ne sont pas fixes, donc je ne pense pas emou colsattribut peut aider pour spécifier la largeur.
<textarea rows="4" cols="50"></textarea>C'est équivalent à:
textarea {
height: 4em;
width: 50em;
}où 1em équivaut à la taille de police actuelle, donnez donc à la zone de texte 50 caractères de large. voir ici .
paddinget line-heighten compte. Supposons que vous ayez un remplissage d'un demi-em en haut et en bas et une hauteur de ligne de 1,2em, alors la hauteur pour 4 lignes serait 1 + 4 * 1,2 = 5,8em.
height: calc(3em + 8px);.
rowsattribut soit (un peu) fiable, je ne me fierais pas à l' colsattribut à moins d'utiliser des polices monospace sur la zone de texte. Voir le violon mis à jour de @ AlexanderScholz .
Je ne pense pas que vous puissiez. Je choisis toujours la hauteur et la largeur.
textarea{
width:400px;
height:100px;
}la bonne chose à faire de la manière CSS est que vous pouvez complètement le styliser. Vous pouvez maintenant ajouter des éléments tels que:
textarea{
width:400px;
height:100px;
border:1px solid #000000;
background-color:#CCCCCC;
}Autant que je sache, vous ne pouvez pas.
De toute façon, ce n'est pas à cela que sert le CSS. CSS est pour le style et HTML pour le balisage.
line-height, paddingsur le conteneur (ne calculant pas une hauteur basée sur box-sizing), même en tenant compte des différents rapports hauteur / largeur des polices utilisées pour s'assurer que la zone de texte affiche le numéro défini de lignes de texte que vous ne pouvez pas obtenir en utilisant la hauteur css.
Je voulais juste publier une démo en utilisant calc () pour définir les lignes / hauteur, car personne ne l'a fait.
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>Si vous utilisez des valeurs élevées pour les rembourrages (par exemple supérieurs à 0,5em), vous commencerez à voir le texte qui déborde de la zone de contenu (-box), et cela pourrait vous amener à penser que la hauteur n'est pas exactement de x lignes ( que vous définissez), mais c'est le cas. Pour comprendre ce qui se passe, vous pouvez consulter le modèle de boîte et box-sizing pages.