To pytanie ma już odpowiedź tutaj:

to jest mój fragment kodu css

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

robi to ..

the quick brown fo...

czego chcę to

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

czy w ogóle można to zrobić za pomocą CSS? czy muszę do tego użyć javascript Jeśli potrzebny jest javascript, każdy może mnie nauczyć, jak to zrobić? dzięki

AKTUALIZACJ

Próbowałem usunąćwhite-space: nowrap; i dodałoverflow-y: hidden; daje mi układ 3 linii, ale nie ma elipsy

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