Настройка длины строки в jquery fancytree с помощью всплывающей подсказки

Question

При отображении данных в fancytree древовидная структура Я хочу, чтобы длинные строки отображались следующим образом. Должны быть показаны первые 24 символа, а затем многоточие ("apple ... "), и при наведении на них должна отображаться полная строка в подсказке.

Есть ли эффективный способ построения желаемых элементов пользовательского интерфейса? У меня есть данные JSON в правильной структуре, которая мне нужна для создания причудливого дерева.

Answer 1

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

span.fancytree-title {
    width: 75px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Чтобы показать полный заголовок узла Fancytree во всплывающей подсказке, вы можете установить tooltip вариант NodeData объект вроде так:

{
    title: "Node Long title 1",
    tooltip: "Node Long title 1"
}

Полный пример, показывающий CSS и всплывающую подсказку, можно найти в этом JSFiddle.