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