Esta pergunta já tem uma resposta aqui:

este é o meu snippet de css

.test{
    width:150px;
    height:60px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

o que faz é ..

the quick brown fo...

o que eu quero é

the quick brown fox
jumps over the lazy
dog. the quick br...

existe alguma maneira de fazer isso apenas com CSS? ou eu preciso usar o javascript para isso. Se o javascript é necessário, alguém pode me ensinar como? obrigado

ATUALIZA

i tentei remover owhite-space: nowrap; e acrescentouoverflow-y: hidden; dá-me o layout de 3 linhas, mas sem reticências

.test{
    width:150px;
    height:60px;
    overflow-y: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}