Как использовать CSS-переполнение текста на оберточном тексте?

Question

Кто-нибудь знает способ использования {text-overflow: ellipsis;} для фрагмента текста, который переносится на вторую строку?

Добавление:

{whitespace: nowrap;}

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

Answer 1

Если вы знаете, что контент будет переноситься в две строки каждый раз, когда это решение будет работать. Используйте ::after и содержимое: '...'; и затем поместите его в нижний правый угол вашего типа (который должен быть элементом уровня блока). Это будет работать, только если вы работаете со сплошным фоновым цветом, так как вам нужно установить фон ::after для соответствия.

Единственный недостаток - ограниченные параметры, в которых это может быть успешным, и тот факт, что он разрезает персонажа пополам, если вещи не выстраиваются в ряд (что, вероятно, не будет).

Answer 2

Я совершенно уверен, что то, что вы пытаетесь сделать, невозможно в чистом CSS-решении. Однако есть способ получить аналогичный результат. Вот что я сделал:

http://cce.usyd.edu.au/courses/Business+%26+Management/Business+Communication

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

Таким образом, решение не совсем так, как вы хотите, но достижение аналогичного результата пользовательского интерфейса, чтобы пользователь знал, что контент урезан. Лично я думаю, что это довольно красиво: -)