Javascript: добавление многоточия в текст HTML в соответствии с размером контейнера

Question

У меня есть div, который содержит текст. Текст должен быть сокращен до двух строк и в конце добавлено «...», чтобы указать, что есть еще.
Поскольку шрифт и размер шрифта могут различаться в зависимости от настроек разных пользователей (например: настройки «размера текста» браузера, разных браузеров и т. Д.), Мне нужно сделать это динамически на стороне клиента.

Какова лучшая стратегия для этого?
Спасибо.

Answer 1

Существует несколько CSS-функций, которые впервые появились в Microsoft и уже давно доступны разработчикам в Internet Explorer. Одной из таких функций является свойство text-overflow , которое теперь находится в CSS3 и имеет реализации в Safari и Opera. Однако Firefox по-прежнему не поддерживает эту функцию.

Для кросс-браузерной реализации JavaScript функции многоточия для jQuery framework вам может быть интересна следующая статья:

• Ajaxian - переполнение текста для Firefox через jQuery

---

UPDATE:

Поскольку jQuery не является опцией, вы можете проверить следующее:

• Учебник по Javascript - Как использовать автоэллипс текста
• JavaScript Ellipsis или Cross-Browser "усекать с точками"
• Ajaxian - многоточие или «усечение с точками» через JavaScript

Answer 2

Вам необходимо определить количество символов в тексте, которое вы хотите видеть. Затем просматривайте текст с помощью цикла for, пока не достигнете определенного количества символов, сохраняя пройденные символы в строковую переменную. Как только вы достигнете определенного количества символов, цикл for завершится, и вы добавите строку «...» в переменную строки сборки. Это ваш новый текст для контейнера. Вот некоторый код:

nchars = 50;
div = document.getElementById("your_div_with_text");
divText = div.innerHTML;
newDivText = "";
for(var i = 0; i < nchars; i++){
   newDivText += divText[i];
}
newDivText += "...";
div.innerHTML = newDivText;

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