Многострочное усечение текста

Question

Кто-нибудь знает простой и понятный способ обрезать раздел текста до двух строк?Это то, что я пытаюсь урезать (элемент p):

<blockquote><p>&#8220;<?=$test_entry ?>&#8221;</p></blockquote><cite><?=$test_name ?></cite>

Я пробовал различные решения, в том числе зажим.js (который даже не работает должным образом в приведенном примере) Я пробовал решения CSS3 с использованием text-переполнение, но они усекаются только до одной строки.Во всех других примерах JavaScript используется длина строки, которая разрывается при изменении размера текста, при кодировании специальных символов и при многих других условиях.

Я рад изменить разметку, если необходимо. Я просто хочу иметь возможность обрезать текстчтобы вписать две строки в блок div и завершить его эллипсами (...) или даже лучше (... "). Я подумал, что это будет просто, но, очевидно, нет.

Может кто-нибудь указатьменя к существующему решению или дать мне подсказку, с чего начать. Любая помощь очень ценится.

Answer 1

Здесь вы можете найти существующее решение на основе jQuery, которое должно работать в разных браузерах, в этом вопросе SO .

Answer 2

Используйте элемент textarea для ограничения строк текста!

<textarea rows="2" readonly disabled>Try enameling the ricotta broccolis with aged champaign and rum, warmed. </textarea>

Затем вы можете использовать псевдоэлемент: after, чтобы добавить многоточие или «Read more».

Не забывайте атрибуты «только для чтения» и «отключен». Readonly предотвращает взаимодействие пользователя с textarea. Отключено: любые формы на странице не могут отправлять значения.