filas de textarea y atributo cols en CSS

Respuestas:

106

widthy heightse usan al ir a la ruta 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
fuente
12
Según la respuesta del usuario 2928048 a continuación, si usa "em" en lugar de "px", puede especificar el ancho y la altura en caracteres como lo haría con los atributos 'filas' y 'cols'. Incluso funciona con IE6, creo.
Swanny
Si bien estoy de acuerdo con el uso empara especificar la altura, dudo que se pueda usar para especificar el ancho. Se puede trabajar con fuentes de espacio sencillo (después de averiguar el ancho: cociente de la altura de los caracteres y modificar el valor de anchura correspondientemente), y eso es todo. Excepto espacio sencillo, grosor de los caracteres no son fijos, por lo que no creo emo colsatributo puede ayudar a la hora de especificar el ancho.
akinuri
Podría estar equivocado, pero px no funcionó para mí; ellos lo hicieron.
Jesse Steele
310 
<textarea rows="4" cols="50"></textarea>

Es equivalente a:

textarea {
    height: 4em;
    width: 50em;
}

donde 1em es equivalente al tamaño de fuente actual, por lo tanto, el área de texto tiene 50 caracteres de ancho. ver aquí .

usuario2928048
fuente
39
Para ser más exactos, es necesario tomar paddingy line-heighten cuenta. Supongamos que tiene un relleno de medio em en la parte superior e inferior y una altura de línea de 1.2em, entonces la altura para 4 filas sería 1 + 4 * 1.2 = 5.8em.
nalply
2
@nalply su solución es correcta. El problema es 4em = 4 x tamaño de fuente que no tiene en cuenta el relleno ni la altura de la línea
Nicholas
3
Si tiene el tamaño del cuadro de propiedad: content-box; no tendrá que preocuparse por el relleno, por lo que solo debe permanecer con la altura de la línea.
mikewasmike
2
Agradable @nalply, gracias por el enfoque. Agregando un poco a su respuesta, la función calc () CSS3 puede facilitar el cálculo de ancho / alto: digamos que tengo un área de texto con 4px de relleno superior e inferior de relleno, y quiero que tenga 3 filas de alto, la altura sería height: calc(3em + 8px);.
GBU
Si bien el rowsatributo es (algo) confiable, no confiaría en el colsatributo a menos que esté usando fuentes monoespaciales en el área de texto. Vea el violín actualizado de @ AlexanderScholz .
akinuri
16

No creo que puedas. Siempre voy con altura y ancho.

textarea{
width:400px;
height:100px;
}

Lo bueno de hacerlo al estilo CSS es que puedes darle un estilo completo. Ahora puede agregar cosas como:

textarea{
width:400px;
height:100px;
border:1px solid #000000;
background-color:#CCCCCC;
}
Mono de código
fuente
4

Que yo sepa, no puedes.

Además, para eso no es CSS. CSS es para el estilo y HTML es para el marcado.

Moulde
fuente
1
CSS es para diseñar la representación visual de un elemento. Esto incluye el ancho y la altura de un área de texto.
Sampson el
No son lo mismo, el navegador tiene en cuenta la altura del texto en cada fila line-height, incluido paddingen el contenedor (sin calcular una altura basada en box-sizing), incluso teniendo en cuenta las diferentes relaciones de aspecto de las fuentes utilizadas para garantizar que el cuadro de texto muestre el número establecido de filas de texto que no puede lograr utilizando css height.
William Isted
0

Solo quería publicar una demostración usando calc () para configurar filas / altura, ya que nadie lo hizo.

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>
Expandir fragmento

Si usa valores grandes para los rellenos (por ejemplo, más de 0.5em), comenzará a ver el texto que desborda el área de contenido (-box), y eso podría llevarlo a pensar que la altura no es exactamente x filas ( que configuras), pero lo es. Para entender lo que está pasando, es posible que desee comprobar hacia fuera El modelo de caja y la caja de dimensionamiento de las páginas.

akinuri
fuente