JQuery - Усеченный текст с методической точностью (не счетчиком символов)

Question

JQuery - Усеченный текст с методической точностью (не счетчиком символов)

Мне нужен сценарий JQuery для усечения абзаца текста с методической точностью (не счетчиком символов).

Я хотел бы достигнуть равномерно усеченного текстового блока. Это должно иметь "больше" и "меньше" ссылка, чтобы развернуть и сократить абзац текста. Мой абзац текста перенесен в отделение с классом, как это:


Headline
The paragraph Text here

Самым близким решением, которое я мог найти на SOF, является то ниже (но это для элемента текстовой области и не работает на меня): Ограничение количества строк в текстовой области

Большое спасибо за любые подсказки. Ben

9

javascript jquery

задан Community 23 May 2017 в 12:09

3 ответа

Другие вопросы по тегам:

javascript jquery

Похожие вопросы:

score 5 · Answer 1

Для базового подхода, вы можете взглянуть на line-height CSS свойство и использовать его в своих расчетах. Имейте в виду, что этот подход не учитывает другие встроенные элементы, которые больше этой высоты (например, изображения).

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

См. этот ответ здесь для примера (хотя и не связанного с целью) того, как работает getClientRects().

Обновление, было немного времени, чтобы вернуться и обновить этот ответ фактическим примером. Он простой, но вы поняли идею:

http://jsbin.com/ukaqu3/2

Пара указателей:

Коллекция, возвращаемая getClientRects, статична, она не будет обновляться автоматически при изменении размеров содержащего элемента. Мой пример обходит это, перехватывая событие изменения размеров окна.
По какой-то странной причине соответствия стандартам, которую я не понимаю, элемент, для которого вы вызываете getClientRects, должен быть встроенным элементом. В примере, который я привел, я использую контейнер div с текстом в другом div внутри с display: inline.

score 1 · Answer 2

почему бы не сделать элемент p с overflow: hidden; задайте фиксированную высоту строки, вычислите высоту div, чтобы идентификатор содержал ровно столько строк, сколько вам нужно, и единственное изменение высоты p из javascript.

p{
    overflow:hidden;
    line-height:13px;
    height:26px; /* show only 2 rows */
}
<script type="text/javascript">
    function seeMoreRows(){
        $(p).height("52px");
    }
</script>

score 0 · Answer 3

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

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

«Как я могу подсчитать текстовые строки внутри элемента dom»