3

Boa tarde. Eu estou fazendo uma atividade na faculdade, onde eu preciso limitar um campo de texto para 100 caracteres, mas eu tenho que usar apenas o CSS para isso.

Eu já tentei essas duas maneiras:

Exemplo 1:

.es1[type="text"]{
    background-color: rgb(173,234,234);
    font-weight: bolder;
    width: 20ch;

Exemplo 2:

.es1[type="text"]{
    background-color: rgb(173,234,234);
    font-weight: bolder;
    max-width: 20ch;

Mas, não consegui. Desde já eu agradeço ;)

3
  • Com CSS??? Isso você não vai conseguir nunca. Provavelmente você deve ter perdido alguma parte da atividade.
    – LeAndrade
    5/09/2018 às 18:42
  • Comumente é usado o atributo input[maxlength] ou textarea[maxlength]. Mas CSS eu nunca tinha visto. 5/09/2018 às 18:46
  • se utilizado max-width: 15ch; e overflow: hidden;, você consegue delimitar a quantidade de linhas para determinadas tags, como o <p>, mas não um campo de entrada de valores 5/09/2018 às 18:59

2 Respostas 2

4

Se for para limitar o número de caracteres dentro do input vc pode usar maxlength="100" e para comportar dentro dele visualmente exatamente 100 caracteres vc pode colocar width: 100ch

Nesse exemplo vc pode ver, limitei em 10 caracteres apenas assim como a largura em 10ch para ficar certinho apenas 10 caracteres de largura no input. Mas leia a observação abaixo.

.es1[type="text"]{
  width: 10ch; /* largura equivalente a 10 letras (10ch) */
  background-color: rgb(173,234,234);
  font-weight: bolder;
}
<!-- o campo só deixa digitar 10 caracteres como o maxlength -->
<input class="es1" type="text" value="1234567890" maxlength="10">
<input class="es1" type="text" value="mmmmm" maxlength="10">

OBS:

Segundo a documentação da Mozilla https://developer.mozilla.org/en-US/docs/Web/CSS/length

CH Representa a largura, ou mais precisamente a medida avançada, do glifo "0" (zero, o caractere Unicode U + 0030) no elemento.

Rezumindo, se vc preencher com 10 caracteres 0 vai dar certinho, mas se forem 10 letras M não vai caber na largura do input

Suporte dos browsers a unidade CH: https://caniuse.com/#feat=ch-unit

3

Eu sempre uso direto no HTML o maxlength.

Fica assim, e pode usar tanto no input quanto no textarea:

<textarea name="mensagem" rows="7" maxlength="512" ></textarea>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .