Нахождение, сколько буквы div подходит

Question

У меня есть div с некоторой стандартной шириной / высотой .. Какие параметры CSS я должен знать, чтобы рассчитать, сколько букв div подходит без переполнения? Я думаю, что следующие параметры являются необходимыми ..

1. размер шрифта
2. текст-indext
3. письмо-разнос
4. высота строки

Тогда как я могу рассчитать максимальное количество букв, которое подходит для div?

Answer 1

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

Во всяком случае, может быть способ ...

В зависимости от того, что вы хотите знать, вы можете использовать скрытый тег с фиксированной шириной и высотой, а также свойства scrollLeft и scrollTop-Properties, чтобы определить, превышает ли текст размеры тега. Это может быть достигнуто установкой scrollLeft и / или scrollTop-Properties на очень высокие значения (например, 99999), которые затем будут заменены браузером действительными значениями. Эти значения 0 или больше 0. Если они больше 0, значение представляет количество пикселей, текст будет переполнен.

Для скрытого поля важно, чтобы оно было добавлено в дерево узлов документа (с appendChild)

Вы можете создать цикл для заполнения символов (или вашего текста) в скрытом поле, которое в точности имеет те же свойства (используйте cloneNode (true)), что и тег / поле источника. В цикле вы будете проверять scrollLeft / scrollTop на наличие переполнений. Если он переполнится, у вас будет максимальный текст, который может показать тег. Чтобы немного ускорить процесс, вы можете убрать скрытый тег из представления браузера (например, влево: 10000px;).

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

Answer 2

Сначала давайте предположим, что у вас есть фиксированный CSS на div:

width
height
line-height
font-size
font-family
etc.

Я бы написал некоторый javascript, чтобы многократно заполнять этот div различным текстом (возможно, извлеченным из реальных статей) и делать это в разных браузерах. Каждый раз рассчитывайте максимальное количество символов, которые заполняют, но не переполняют div. Затем у вас есть верхняя граница числа символов, которые нужно отправить, чтобы всегда заполнять div. Обрежьте каждую статью в вашем слайдере до этого числа. Вы можете добавить 10 символов, если хотите обеспечить переполнение, а затем использовать скрытое переполнение, эллипсы или что-то еще.

Answer 3

Вы можете использовать getClientRects () для объектов, которые уже нарисованы на экране, но я предполагаю, что вы хотите рассчитать это перед рендерингом, да?

Редактировать: О, я только что заметил, что вы сказали, что выне могу использовать Javascript.Извините, я предполагал, что вы имели в виду Javascript.Это меняет проблему.
На стороне сервера вы не будете знать, какой шрифт будет использовать браузер, будет ли округлять ширину каждого символа до целых пикселей или нет и т. Д.