J'aimerais régler le textarea 's rows y cols via CSS.
Comment puis-je faire cela en CSS ?
<textarea rows="4" cols="50"></textarea>C'est équivalent à :
textarea {
height: 4em;
width: 50em;
}où 1em est équivalent à la taille actuelle de la police, ce qui donne une largeur de 50 caractères à la zone de texte. voir ici .
Pour être plus exact, vous devez prendre padding y line-height en compte. Si vous avez un remplissage d'un demi-mètre en haut et en bas et une hauteur de ligne de 1,2em, la hauteur pour 4 rangées sera de 1 + 4 * 1,2 = 5,8em.
@nalply votre solution est correcte. Le problème est 4em = 4 x font-size qui ne prend pas en compte le padding ni la hauteur de ligne.
Si vous avez la propriété box-sizing:content-box ; vous n'aurez pas à vous soucier du padding, il ne vous restera donc que la hauteur de ligne.
Comme indiqué dans la réponse de l'utilisateur 2928048 ci-dessous, si vous utilisez "em" plutôt que "px", vous pouvez spécifier la largeur et la hauteur en caractères comme vous le feriez avec les attributs "rows" et "cols". Cela fonctionne même avec IE6, je crois.
Bien que je sois d'accord pour utiliser em pour spécifier la hauteur, je doute qu'il puisse être utilisé pour spécifier la largeur. Il s'agit de pourrait fonctionnent avec les polices monospaces (après avoir déterminé le rapport largeur/hauteur des caractères et modifié la valeur de la largeur en conséquence), et c'est tout. À l'exception de la police monospace, la largeur des caractères n'est pas fixe. em o cols peut être utile pour spécifier la largeur.
Je ne pense pas que tu puisses. J'utilise toujours la hauteur et la largeur.
textarea{
width:400px;
height:100px;
}L'avantage de la méthode CSS, c'est qu'elle permet de créer un style à part entière. Maintenant, vous pouvez ajouter des choses comme :
textarea{
width:400px;
height:100px;
border:1px solid #000000;
background-color:#CCCCCC;
}
Le CSS sert à styliser la représentation visuelle d'un élément. Cela inclut la largeur et la hauteur d'une zone de texte.
Ils ne sont pas les mêmes, le navigateur prend en compte la hauteur du texte sur chaque ligne, notamment line-height , padding sur le conteneur (ne pas calculer une hauteur basée sur box-sizing ), même en tenant compte des différents rapports d'aspect des polices utilisées pour s'assurer que la zone de texte affiche le nombre défini de rangées de texte, ce qui n'est pas possible en utilisant la hauteur css.
Je voulais juste poster une démo utilisant calc() pour définir les rangs/la hauteur, puisque 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 de grandes valeurs pour les paddings (par exemple, supérieures à 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 x lignes (que vous avez définies), mais c'est le cas. Pour comprendre ce qui se passe, vous pouvez consulter les documents suivants Le modèle de boîte y Taille de la boîte pages.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
0 votes
Une question du type "quand utiliser quoi" : stackoverflow.com/questions/3896537/