эллипсификация текста в таблице данных yui - PullRequest
Новая
       15

эллипсификация текста в таблице данных yui

2 голосов
/ 07 сентября 2010

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

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

Любые хорошие предложения о том, как сделать это, используя форматтер или что-то подобное.

1 Ответ

3 голосов
/ 08 сентября 2010

Я придумал эту идею. Сценарий будет измерять содержимое div и, если его ширина будет больше ширины div, он немного уменьшит содержимое, чтобы мог поместиться многоточечный символ, и поместил многоточечный символ: 

<style>
div {
    width: 100px;
    height: 1em;
    overflow: hidden;
    white-space: nowrap;
}
</style>
<div>Short text.</div>
<div>Extremely long text.</div>
<script>
(function () {
    var list = document.getElementsByTagName('div');
    for (var i = 0; i < list.length; i++) {
        var spanElement = document.createElement('span');
        while (list[i].childNodes.length)
            spanElement.appendChild(list[i].firstChild);
        list[i].appendChild(spanElement);
        if (list[i].firstChild.offsetWidth > list[i].offsetWidth) {
            var ellipsisSpanElement = document.createElement('span');
            ellipsisSpanElement.appendChild(document.createTextNode('…'));
            list[i].appendChild(ellipsisSpanElement);
            var newWidth = list[i].offsetWidth - ellipsisSpanElement.offsetWidth;
            list[i].firstChild.setAttribute('style',
                'overflow: hidden; white-space: nowrap; display: block; float: left; width: ' + newWidth + 'px');
        }
    }
})();
</script>

Я не использовал YUI в этом примере, я почти не знаю эту библиотеку. Я уверен, что этот код можно было бы написать намного проще, избегая всех этих методов DOM и используя заменители YUI.

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

Решение: используйте text-overflow: ellipsis в браузерах, которые поддерживают это, и скрипт в других.

Список всех вариантов text-overflow: ellipsis, многие из них еще не работают. Успешно протестировано в IE 8.0, Opera, Chrome. 

text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-icab-text-overflow: ellipsis;
-khtml-text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
...