Блог

Учитывая это:

 <p class="summary">Here is some text, could be 5 words, could be 500 words.</p>
  

Я увеличиваю высоту абзаца с помощью этого кода:

 var pHeight = $('.summary').height();
  

И в моем случае, если оно больше 32, оно будет длиной в три строки (что слишком длинно). В этом случае я хочу обрезать текст и вставить ссылку «Подробнее …». Проблема в том, как мне определить, где нужно обрезать, чтобы текст занимал всего две строки? Если бы только был какой-то способ, я мог бы взять количество символов и умножить его на некоторое число, равное размеру каждой буквы. С моноширинным пространством это было бы относительно просто, я думаю, но мы говорим об Arial.

Любые указания в правильном направлении были бы оценены, спасибо!

По нескольким причинам нет хорошего способа сделать это. Во-первых, разные браузеры / платформы могут отображать шрифты по-разному (какой бы незначительной ни была разница). Во-вторых, в javascript нет способа извлечь индивидуальный размер символа данного шрифта (AFAIK).

Если бы я реализовывал что-то подобное, у меня просто была бы константа для максимально допустимой длины и substring это. Я бы также сделал это на стороне сервера, поскольку нет смысла отправлять данные клиенту, который вы не собираетесь использовать.

Другим методом (хотя и не тем, который я бы использовал) было бы поместить ваш текст в div с заданными шириной и высотой, обрезая любое переполнение с помощью overflow: hidden . Конечно, это потенциально может привести к неполному вырезанию слов, поэтому я бы не советовал этого делать.

Если ваш рост слишком высок, вы могли бы просто поместить «p» на белом фоне над третьей строкой и добавить в нее «Подробнее …». И добавьте высоту и «overflow: hidden» к вашему «p».

Я бы использовал расширитель текста jquery. Существует несколько вариантов, но вот пример:http://plugins.learningjquery.com/expander Точка среза основана на количестве символов, но методом проб и ошибок вы должны быть в состоянии найти количество символов, которое дает вам две строки.

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

Вы как бы знаете размер контейнера, если в нем должно быть 2 строки, исходя из высоты текста. Итак, представьте, что ваш контейнер имеет высоту в Ypx.

1. Получить весь текст из контейнера
2. Установите для контейнера значение переполнение: авто и установите максимальную высоту: Ypx;
3. Начните добавлять слово за словом текст, который вы извлекли из контейнера
4. Проверьте, является ли высота прокрутки меньше или равна Ypx
5. Продолжайте добавлять слова, пока (4) не станет недействительным, затем удалите последнее добавленное вами слово.

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

Надеюсь, это поможет!

Я написал небольшой плагин jQuery, который удаляет слова из содержимого до тех пор, пока элемент не станет ниже определенной высоты. (И это добавляет три точки в конце содержимого.) Это решение похоже на решение Lomefin. В отличие от его решения, мое оптимизировано для ситуаций, когда вам нужно удалить всего несколько слов.

Код находится здесь.

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