Respostas:
width
e height
são usados ao seguir a rota 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>
em
para especificar a altura, duvido que possa ser usado para especificar a largura. Ele pode trabalhar com Monoespaçada (após descobrir a largura: rácio altura dos caracteres e modificando o valor da largura correspondente), e isso é tudo. Exceto monospace, larguras de caracteres não são fixas, então eu não acho que em
ou cols
atributo pode ajudar ao especificar a largura.
<textarea rows="4" cols="50"></textarea>
É equivalente a:
textarea {
height: 4em;
width: 50em;
}
onde 1em é equivalente ao tamanho da fonte atual, torne a área de texto 50 caracteres de largura. veja aqui .
padding
e line-height
em conta. Digamos que você tenha um preenchimento de meio em na parte superior e inferior e uma altura de linha de 1,2em, a altura para 4 linhas será 1 + 4 * 1,2 = 5,8em.
height: calc(3em + 8px);
.
rows
atributo seja (um pouco) confiável, eu não confiaria no cols
atributo, a menos que esteja usando fontes monoespaçadas na área de texto. Veja o violino atualizado de @ AlexanderScholz .
Eu acho que você não pode. Eu sempre vou com altura e largura.
textarea{
width:400px;
height:100px;
}
o bom de fazê-lo da maneira CSS é que você pode estilizá-lo completamente. Agora você pode adicionar coisas como:
textarea{
width:400px;
height:100px;
border:1px solid #000000;
background-color:#CCCCCC;
}
Tanto quanto eu sei, você não pode.
Além disso, não é para isso que serve o CSS. CSS é para estilo e HTML é para marcação.
line-height
, incluindo , padding
no contêiner (sem calcular a altura com base box-sizing
), mesmo levando em consideração as proporções diferentes das fontes usadas para garantir que a caixa de texto exiba o número definido de linhas de texto que você não pode obter usando css height.
Eu só queria postar uma demonstração usando calc () para definir linhas / altura, já que ninguém o fez.
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 você usar valores grandes para os preenchimentos (por exemplo, maiores que 0,5em), começará a ver o texto que transborda a área de conteúdo (-box), e isso pode levar você a pensar que a altura não é exatamente x linhas ( que você definiu), mas é. Para entender o que está acontecendo, você pode querer verificar o modelo de caixa e de dimensionamento de caixa páginas.