lignes de textarea et attribut cols en CSS

154

Je voudrais mettre les textarea« s rowset les colsattributs via CSS.

Comment ferais-je cela en CSS?

css styling ASD
la source
A quand utiliser quelle question: stackoverflow.com/questions/3896537/…
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功

Réponses:

106

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>
Sampson
la source
12
Selon la réponse de user2928048 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'. Fonctionne même avec IE6, je crois.
Swanny
Bien que je sois d'accord avec l'utilisation 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.
akinuri
Je me trompe peut-être, mais px ne fonctionnait pas pour moi; em fait.
Jesse Steele le
310 
<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 .

user2928048
la source
39
Pour être plus précis, vous devez prendre 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.
nalply
2
@nalply votre solution est correcte. Le problème est 4em = 4 x taille de la police qui ne tient pas compte du remplissage ni de la hauteur de ligne
Nicholas
3
Si vous avez la propriété box-sizing: content-box; vous n'aurez pas à vous soucier du rembourrage, vous restez donc uniquement avec la hauteur de ligne.
mikewasmike
2
Bien @nalply, merci pour l'approche. En ajoutant un peu à votre réponse, la fonction calc () CSS3 peut faciliter le calcul de la largeur / hauteur: disons que j'ai une zone de texte avec padding-top et padding-bottom 4px, et je veux qu'elle fasse 3 lignes de haut, la hauteur serait height: calc(3em + 8px);.
GBU
Bien que l' 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 .
akinuri
16

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;
}
Singe de code
la source
4

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.

Moulde
la source
1
CSS sert à styliser la représentation visuelle d'un élément. Cela inclut la largeur et la hauteur d'une zone de texte.
Sampson le
Ils ne sont pas les mêmes, le navigateur prend en compte la hauteur du texte sur chaque ligne y compris 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.
William Isted
0

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>
Développer l'extrait

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.

akinuri
la source