Как обрезать текст?

Question

[Skrolea]

Добрый день. Пробую использовать

white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

в блоке максимальной шириной в 320px, но текст не обрезается. А хотелось бы не просто обрезать, но и обрезать текст на нескольких строчек. (Как то задать, чтобы текст мог быть в две строки максимум, а потом обрезался)

.card__content {
  flex: 1;
  min-width: 0;
}
.card__content > h3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

https://jsfiddle.net/pxn29zx3/

В результате обрезается блок, но как разбить его на несколько строчек?

Comments

[Максим]

вы обрезаете тег h3 ?

[Skrolea]

Да

[Skrolea]

Это будет название новости, оно может быть достаточно длинным, но хотелось бы ограничить в две строчки максиммум

Answer 1

[Максим Тимофеев]

https://jsfiddle.net/pxn29zx3/4/

для блока с обрезкой надо указывать width

Comments

[Skrolea]

Да, я указал и обрезалось. А как сделать, скажем, на две строчки?

[Максим Тимофеев]

Skrolea: https://jsfiddle.net/pxn29zx3/6/ - при white-space: nowrap; перенос работает только при явном теге br в тексте

[Максим Тимофеев]

Skrolea: как вариант https://jsfiddle.net/pxn29zx3/7/ убираем white-space: nowrap; и ставим явный height

[Skrolea]

С height как то странно выходит. Попробую еще с multiline каким-нибудь, но спасибо