Ivon Filho

Ivon Filho

Olá, procurando web designer freelancer para seu projeto?

Configurando um tamanho máximo de caracteres em css

Se eu uso textarea ou input, existe uma propriedade de tamanho máximo (maxlength=”50″) para eles, mas e esse limite precisa ser definido dentro de uma div?

A solução é bem simples e pode ser feita usando html e css, sem grandes complicações. Veja o código abaixo:

<div class="wrapper">
<p class="demo-1">
Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Ut odio temporibus
voluptas error distinctio hic quae corrupti vero
doloribus optio! Inventore ex quaerat modi 
blanditiis soluta maiores illum, ab velit.
</p>
</div>

<div class="wrapper">
<p class="demo-2">
Lorem ipsum dolor sit amet, 
consectetur adipisicing elit. Ut odio temporibus
voluptas error distinctio hic quae corrupti vero
doloribus optio! Inventore ex quaerat modi 
blanditiis soluta maiores illum, ab velit.
</p>
</div>
.wrapper {
  padding: 20px;
  background: #eaeaea;
  max-width: 400px;
  margin: 50px auto;
}
  
.demo-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.demo-2 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 150px;
}

Exemplo demo-1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit...

Exemplo demo-2

Lorem ipsum dolor sit amet...

Fonte: Text truncate techniques

Rolar para cima

Vamos Conversar?

Melhorar sua performance digital é o nosso desafio. Colecionamos cases de sucesso e queremos fazer o mesmo pela sua marca. Envie uma mensagem pra gente!

Web Designer Freelancer Brasília DF

Sobre

Apaixonado por WordPress, Ivon Filho atua como web designer e desenvolvedor front-end desde 2010.

Trabalhando hoje como  freelancer, atende, em sua maioria, pequenas e médias empresas que procuram por serviços de excelente qualidade a um custo acessível.

Criação de sites personalizados, desenvolvimento em plataforma WordPress, criação de identidade visual são especialidades da “casa”, o verdadeiro conceito feito à mão!

Experiências

Website Developer

Viva Pixel
Freelancer

Website Developer

Conectando Pessoas
2013 – 2016 - 3 anos

Website Developer

7 Pontos Agência Integrada
2012 – 2013 - 1 ano

Formação

Universidade Paulista

Comunicação e Mídias Digitais
2009 – 2011