using переполнения текста: многоточие; только при достижении 3 строк в div [duplicate]

На этот вопрос уже есть ответ:

Применение многоточечного текста к многострочному тексту 23 ответа

это мой фрагмент CSS

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

что это такое ..

the quick brown fo...

что я хочу это

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

В любом случае, это можно сделать только с помощью CSS? или мне нужно использовать JavaScript для этого. Если javascript нужен, кто-нибудь может научить меня, как? Благодарность

ОБНОВИТ

я пытался удалитьwhite-space: nowrap; и добавилoverflow-y: hidden; это дает мне трехстрочный макет, но без многоточия

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

Ответы на вопрос(2)

Ваш ответ на вопрос