Esta pregunta ya tiene una respuesta aquí:

este es mi fragmento css

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

lo que hace es ...

the quick brown fo...

lo que quiero es

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

¿Hay alguna forma de hacer esto con solo CSS? o necesito usar javascript para esto. Si se necesita JavaScript, ¿alguien puede enseñarme cómo? ¡Gracias

ACTUALIZA

intenté eliminar elwhite-space: nowrap; y agregadooverflow-y: hidden; me da el diseño de 3 líneas pero sin puntos suspensivos

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