Мне нужно укоротить длинный абзац, чтобы в конце отображалась только одна строка с многоточием (в некотором роде) (используя CSS, JS, JQuery ...), но есть три дополнительные условия, которые мне трудно выполнить:
- На многоточии должно быть событие нажатия кнопки мыши, которое показывает и скрывает оставшийся контент (это относительно легко с кучей руководств по inte rnet)
- Многоточие должно выглядеть как кнопка (т. Е. Не простой текст "...", в идеале автономный элемент html)
- Многоточие должно быть видно только в том случае, если если содержимое слишком длинное для отображения в одной строке (это часть, с которой я борюсь)
Вот скрипка почти того, что я хочу: https://jsfiddle.net/Drecker/3gv4tkL9/2/ с выполнением первых двух условий, но мне нужно, чтобы второй многоточие (показанное красным текстом) не отображалось (так как соответствующий текст достаточно короткий, чтобы поместиться в одну строку).
С другой стороны, я возможность использовать параметр CSS text-overflow: ellipsis, но в таком случае Я не могу сделать многоточие кликабельным и изменить его макет.
Редактировать: Чтобы уточнить, данные (текст параграфов) динамически загружаются (извлекаются из внутренней службы, обрабатываются с помощью Vue. js и отображается через v-for), поэтому я не могу просто отобразить страницу, посмотреть, какие строки слишком длинные, и удалить кнопки из таких строк. Я попытался сделать код в скрипте как можно более простым для чтения, чтобы избежать вызова внешней службы для загрузки текстов и использования Vue. js