linhas de textarea e atributo cols em CSS

154

Eu gostaria de definir as textarea's rowse colsatributos via CSS.

Como eu faria isso em CSS?

css styling ASD
fonte
A quando usar cada pergunta: stackoverflow.com/questions/3896537/...
Ciro Santilli郝海东冠状病六四事件法轮功

Respostas:

107

widthe heightsã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>
Sampson
fonte
12
Conforme a resposta do usuário2928048 abaixo, se você usar "em" em vez de "px", poderá especificar a largura e a altura em caracteres como faria com os atributos 'linhas' e 'cols'. Até funciona com o IE6, acredito.
11114 Swanny
Embora concorde em usar empara 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 emou colsatributo pode ajudar ao especificar a largura.
akinuri
Eu posso estar errado, mas px não funcionou para mim; eles fizeram.
Jesse Steele
309 
<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 .

user2928048
fonte
39
Para ser mais exato, você precisa tomar paddinge line-heightem 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.
nalply
2
@nalply sua solução está correta. O problema é 4em = 4 x de fonte de tamanho que nem factores o estofamento nem linha-altura
Nicholas
3
Se você tiver o tamanho da caixa de propriedades: content-box; você não precisará se preocupar com o preenchimento; portanto, permanecerá apenas com a altura da linha.
mikewasmike
2
Nice, obrigado pela abordagem. Adicionando um pouco à sua resposta, a função CSS3 do calc () pode facilitar o cálculo da largura / altura: digamos que eu tenha uma área de texto com 4px de preenchimento na parte superior e inferior do preenchimento e que queira que ela tenha 3 linhas de altura, a altura seria height: calc(3em + 8px);.
GBU 10/10
Embora o rowsatributo seja (um pouco) confiável, eu não confiaria no colsatributo, a menos que esteja usando fontes monoespaçadas na área de texto. Veja o violino atualizado de @ AlexanderScholz .
akinuri
16

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;
}
Code Monkey
fonte
4

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.

Moulde
fonte
1
CSS é para estilizar a representação visual de um elemento. Isso inclui a largura e a altura de uma área de texto.
Sampson
Eles não são iguais, o navegador leva em consideração a altura do texto em cada linha line-height, incluindo , paddingno 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.
William isTed
0

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

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.

akinuri
fonte