Динамически сокращать / скрывать / перекрывать текст в ячейках таблицы, когда слишком долго

Question

Моя таблица имеет статические значения ширины, но иногда ячейки таблицы определенного столбца могут содержать текст, который слишком длинный и который портит ширину таблицы. Я ищу способ динамически укорачивать текст (вроде функциональности сетки таблицы, но затем без сеток), потому что он может иметь переменную длину, и при наведении курсора на ячейку таблицы весь текст отображается без растяжения таблицы .

В настоящее время я жестко запрограммировал этот сценарий следующим образом: string.substring(0, 65) + '...'; и передача полного текста в атрибут 'title' ячейки таблицы.

Обратите внимание, что я не хочу продолжать использовать атрибут 'title'. Я попытался заключить текст в <span style='position: absolute; background: #EEE'></span>, когда его вызвало событие зависания, но, к сожалению, это не было привлекательным решением, так как текст немного сдвинулся вниз, в то время как отступы и стиль полей были изменены.

Решением также может быть плагин jQuery или скрипт JavaScript.

Answer 1

Вы должны попробовать эту инструкцию CSS:

td { break-word: word-wrap; }

, которая работает во многих браузерах (да, включая IE 6, даже IE 5.5, но не Fx 3.0. Она распознается только Fx3.5 +. Также хорошодля Saf, Chr и Op, но я не знаю точную версию для них) и не причиняю вреда другим.

Если ширина таблицы все еще запутана, есть также:

table { table-layout: fixed; }
th, td { width: some_value; }

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

Answer 2

1.Сокращение исходных данных

Я предлагаю вам рассмотреть что-то более элегантное, чем прерывание строки на 65-м символе.- Вместо этого ищите пробел, чтобы разбить строку в.Разбивайте средние слова, только если пробелы не найдены.

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

2.Отображение исходных данных при наведении

Я предпочитаю YUI.Их подсказка виджет хорошо работает для этого.Пример .