Executando verificação de segurança...
1

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...

Carregando publicação patrocinada...