Как стать автором
Обновить

Комментарии 48

Спасибо. Очень пригодится.
Да, супер, особенно понравилась у фаерфокса с прозрачным градиентом.
Беда в том, что нужно использовать изображение, и если у вас фон другого цвета (не белый), то нужно соответственно и другое изображение. То есть под каждый фон нужно создавать собственное изображение. Еще минус, если у вас сложный фон (какое то фоновое изображение). Хотя все это можно обойти, все зависит от задачи.
Да, это понятно, об универсальности метода вы уже сказали, но статья всеравно полезная:)
В русском языке нет слова "троеточие", есть "многоточие". Просьба поправить текст.
А Word говорит что есть, Lingvo переводит троеточие как ellipsis. Ellipsis в словаре LingvoComputer того же Lingvo:
ellipsis
троеточие (как признак пропуска слов или незавершенности действий)

Так что видимо есть такое слово. Вообще же сначала использовал его, потом поменял все на многоточие. Видимо где-то упустил.
Ну, вообщще, ни Word ни Lingvo не являются критериями. Проверка орфографии и пунктуации в Word для меня сродни гаданию на кофейной гуще.
Результат проверки на компетентном сайте http://gramota.ru/slovari/dic/?word=%F2%F0%EE%E5%F2%EE%F7%ED%E8%E5&all=x .
Ну если так рассуждать, то много каких слов нет в русском языке из тех что есть в статье:
автогенерируемый
контент
схлопнется
псевдо-элемент
подглючивает
глюк
подгрузится
Статья не для демонстрации грамотности и знания русского языка, а несколько для другого и о другом.
Заменил троеточие на многоточие, только для соответствия терминов.
Взять любой учебник по русскому языку, и в описании знаков препинания будет упоминатья многоточие, а не троеточие. С таким же успехом можно точку с запятой назвать запятоточием, а апостроф - верхозапятой.
В данном случае ставится именно три точки, а не символ многоточие. Тем более, что ellipsis переводится именно как троеточие, и используется термин не для пунктуации (как в русском языке), что важно, а для обозначения что часть текста, точнее набора символов, опущено. То есть вы мне говорите про знак пунктуации, а в статье использовался (теперь уже) термин "признак пропуска слов", который, общепринят, видимо, раз он указывается в словарных статьях.
Ех, нашли до чего докопаться... в коем-то веки русский язык вспомнили... к чему бы это...
Хм, да, в этом случае вы правы. Извиняйте, недопер.
Признаю свою неправоту в данном случае. Действительно, допустимо использовать слово "троеточие" в просторечии. И, как замечено ниже, действительно, "троеточие" вполне подходящее название для "фигуры из трёх точек".
Многоточие — знак препинания. Потому слово "троеточие" вполне уместно — как и слова "трехногое" или "трехпалое", например.
Так что выбор слова зависит от того, с чем мы имеем дело в данном случае — со знаком препинания, или просто с некой фигурой из трех точек.
Ничего себе. Вот это труд.
Спасибо.
Мда, UTF рулит :)
Кстати я разобрал что тут написано в UTF8:
Ничего себе. Вот это труд.
Спасибо.
Привет, Нео! ;)
Пардон, 11001111 11110000 11101000 11100010 11100101 11110010 11000010 00100000 11001101 11100101 11101110 00100001
Автору благодарность за хорошую и интересную статью. В работе пригодилось.
небольшой минус шага4 - текст выделяется не до конца в области перехода в FF
Автору - респект, как раз в проекте предстоит сделать нечто похожее.
Фоноый png был лишним, как мне кажется.
НЛО прилетело и опубликовало эту надпись здесь
Спасибо за позновательную статью и... за открытие Basis.js :)
То что вы могли открыть весьма старое. Надеюсь скоро будет новый релиз.
Cпасибо, не часто встретишь такое на хабре.
кажется впервые решение по реализации overflow (на javascript) видел на форуме котерова.
Спасибо за статью!
И у меня есть вопрос на очень близкую тему, буду признателен:
Можно ли как-то заставить Firefox делать принудительные переносы неразрывных строк вида "222222"? IE и Opera по-совему позволяют это делать, а в огнелисе такого найти не смог.
Возможно вам поможет , его понимают IE и FF, это мягкий перенос, то есть в месте где указан данный тэг возможен перенос текста, так как будто бы там стоял пробел.
Объёмная и полезная статья, спасибо, было интересно!
Спасибо! Не пробовали использовать Data URL для подключения moz_fix.xml? Если заработает будет минус один HTTP запрос.
Спасибо за наводку :) Как то не подумал вообще в сторону Data URL. К сожалению, у меня не получилось подрубить xml в -moz-binding через Data URL. Потому что там еще используется якорь. Пока ничего относительно того как это сделать не нашел.
Зато можно заменить фоновое изображение, то есть поменять
background: url(ellipsis.png) repeat-y;
на
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAsCAYAAAB7aah+AAAABGdBTUEAAK/
INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAABPSURBVHja7M07CoBA
DEDBKPhZvYD3v2jcYoUg2FpN4JEikJky84qIfdR6R+ks+129P7Xya+uto2WOnwYEAoFAIBAIBAKBQCAQCPQ1t wADAOH0BFQVVlgmAAAAAElFTkSuQmCC") repeat-y;

Тоже минус один запрос, и быстрее срабатывает. Добавил в итоговое решение :)
В GIF эта картинка будет меньше весить.
А давно gif поддерживает полупрозрачность? ;)
Тут необходимо чтобы изображение было полностью прозрачно слева и плавно переставало таким быть справа. То есть полупрозрачный градиент.
Туплю.
пнг можно пожать ещё:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAsCAYAAAB7aah%2BAAAASklEQVRYR%2B3N
uw2AMAxFUafgk7AA%2By9qUgTJYgGaU1y5sPROy8w7Is5Vn43SVe63%2Bn%2FrZeuY7autgUAgEAgEAoFAIB
AIBAKB%2FoYekNCvfRR1APoAAAAASUVORK5CYII%3D

минус 68 байт ;-)

а если уменьшить высоту с 24 до 10 пикселей:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAKCAYAAACqnE5VAAAAM0lEQVQ4y2P8
%2F%2F
%2B%2FBAMDAwcUcwIxFxLmRqLRMbI8DHMimcUOxGxQzMo4atGoRaMWDR2LAOJ6J%2BOjg8yiAAAAAElFTkS
uQmCC

ещё минус 26 )
<div style="border: green 1px solid">
<div class="elipses">Very long text.Very long text.Very long text.Very long text.Very long text</div>
<div class="elipses">Very long text.Very long text.Very long text.Very long text.Very long text</div>
</div>

css
div.elipses
{
-moz-binding: url(ff.xml#ellipsis);
overflow: hidden;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}

div.elipses description
{
width:100%;
}

ff.xml

<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl"
xmlns:xbl="http://www.mozilla.org/xbl"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<binding id="ellipsis">
<implementation>
<constructor>
<![CDATA[
var description = document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul","description");
description.setAttribute("value",this.innerHTML);
this.innerHTML = '';
this.appendChild(description);
]]></constructor>
</implementation>
</binding>
</bindings>
Спасибо за наводку, попробывал. Действительно работает. Единственный минус, не выделяется текст, что в ряде случаев не так критично. Еще раз спасибо :)
Спасибо за статью. Просто решил окончательно разобраться с вопросом, вот и получилось решение. А про выделение как-то забыл.
Лучше заменить description.setAttribute("value",this.innerHTML); на
description.setAttribute("value",this.textContent);.
Иначе не коректно отображаются html entity.
Один большой минус - создается элемент для обрезанного текста description (xul:description), а он позволяет хранить только текст. В моем варианте может быть не только текст, но и другие элементы. Другие элементы, ествественно, кропать не нужно.

Такое реально? Есть альтернатива description?
автору огромное спасибо
Способ не работает в таблицах с авто шириной. ИЕ8, ФФ3.6, О10, Х/С.
Демо страницы отвалились, обновите пжлста
Были временные проблемы с хостингом…
Интересно такое же решение только для блока текста. По последнему примеру поглядел пример и подправил, но точки появляются не в конце всего блока текста, а только в первом ряду. Это не то.
А где всё?! где исходники или примеры???
Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.