Как сделать более одной строки свернутого текста в разворачивающемся блоке на CSS?

Question

[Mesuti]

Привет!
Есть блок с разворачивающимся текстом.
Как сделать свернутый более одной строки?
Увеличиваю высоту текста и обертки - не помогает.
Песочница jsFiddle

Answer 1

[Юрий]

white-space: nowrap;

Означает что весь текст будет отображаться одной строкой, если убрать это свойство, то текст будет отображаться в несколько строк, но при этом не будет работать свойство text-overflow: ellipsis.

Советую обыграть по другому обрезку текста вместо многоточия, например наложением поверх градиента из прозрачный в белый снизу блока, чтобы понятно было что текст еще есть, но он не влез.

Answer 2

[Andrej Sharapov]

Максимум, что могу предложить:

div,
div p {
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease
}

div {
  border: 1px solid #bababa;
  display: block;
  width: 155px;
  height: 30px;
  padding: 10px;
  transition: all .3s ease
}

div p {
  display: block;
  position: relative;
  margin: 0;
  overflow-y: hidden;
  height: 35px;
  transition: all .3s ease
}

div p:after {
  position: absolute;
  top: 18px;
  right: 30px;
  content: ' ...';
}

div:hover {
  height: 145px
}

div:hover p {
  white-space: normal;
  overflow: none;
  height: 100%;
}

div:hover p:after {
  display: none
}

Но может быть придется подгонять афтер под каждый текст) Лучше поискать другое решение или не заморачиваться на изначальном количестве строк. Пусть будет одна)

Answer 3

[Sergey]

Добавить br надо, например

<div>
    <p>“Чайная коллекция” безалкогольный негазированный напиток,<br> “Зеленый чай с ароматом лимона” пастеризованный,075л</p>
</div>

Comments

[Mesuti]

Интересное решение.
Но в текст не нужно вмешиваться =)
Таких записей может быть тысячи.
Нужно на css

[Юрий]

там в любом случае переносы строк будут игнорироваться.

[Sergey]

Тогда надо разобраться как работает white-space: nowrap. Это правило отображает весь текст одной строкой, переносы игнорируются, только <br> работает. Если такое не подходит, то, скорее всего, надо искать другое решение