JQuery: сократить длину строки, чтобы соответствовать заданной ширине

Question

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

Таблица имеет около 40 строк и должна быть сделана для каждой ячейки, поэтому важно, чтобы она была быстрой. Должен ли я использовать JS / jQuery для этого?

Как бы я это сделал?

Спасибо за ваше время.

С уважением,
Marius

Answer 1

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

http://mattsnider.com/css/css-string-truncation-with-ellipsis/ (в архиве)

Answer 2

Используйте мой плагин jQuery: jQuery-Shorten . Он обрабатывает все случаи, использует переполнение текста: многоточие, если доступно, и это очень быстро.

Скачать: github.com / MarcDiethelm / JQuery-Сокращенно

Демо и документы: http://web5.me/jquery/plugins/shorten/shorten.doc.html

Вы можете настроить, как заканчивается текст (многоточие). По умолчанию используется трехточечный символ («…», & hellip ;, Юникод: 2026), но вы можете использовать все, что захотите, включая разметку.

Ширина текста «выбранного» элемента (например, span или div) измеряется с помощью Canvas или путем помещения его во временную ячейку таблицы и укорачивается (первоначально с помощью обоснованного предположения об эффективности) и измеряется снова до его появления (и добавленный многоточие или текст) помещается внутри блока. Всплывающая подсказка для выбранного элемента отображает полный исходный текст.

Answer 3

это должно сработать, где 8 - это размер текста, который вы хотите сохранить

 $('td').each(function(){
    $(this).text($(this).text().substring(0,8)+"...");
 });

чтобы ответить на ваш комментарий. Я думаю, что jquery width () должен помочь вам в этом, но я думаю, что вы движетесь вверх по скользкому склону, вам следует подумать о чем-то ином, например, поместить текст в div или использовать flexigrid или jgrid