Limitar texto com CSS
Você já deve ter visto ou sabe como limitar um texto apenas com css, mas apenas usando uma linha e também não é responssivo.
Formato símples
Exemplo CSS:
selector {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 200px;
}
Resultado:
Lorem ipsum dolor sit amet...
Formato responssivo multilinhas
Usando da forma mostrada abaixo você consegue limitar o texto em uma única linha ou usando a quantidade de linhas que desejar e ainda será respossivo respeitando a largura do elemento html.
Use -webkit-line-clamp
para informar a quantidade de linhas que deseja.
Exemplo CSS:
selector {
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
display: -webkit-box;
-webkit-line-clamp: 2;
width: 10%;
}
Resultado:
Lorem ipsum dolor sit amet,
consectetur adipiscing elit...