text-overflow в Firefox и все, все, все

[n1mnul]

Спасибо. Очень пригодится.

[nutz]

Да, супер, особенно понравилась у фаерфокса с прозрачным градиентом.

[lahmatiy]

Беда в том, что нужно использовать изображение, и если у вас фон другого цвета (не белый), то нужно соответственно и другое изображение. То есть под каждый фон нужно создавать собственное изображение. Еще минус, если у вас сложный фон (какое то фоновое изображение). Хотя все это можно обойти, все зависит от задачи.

[nutz]

Да, это понятно, об универсальности метода вы уже сказали, но статья всеравно полезная:)

[alexxz]

В русском языке нет слова "троеточие", есть "многоточие". Просьба поправить текст.

[lahmatiy]

А Word говорит что есть, Lingvo переводит троеточие как ellipsis. Ellipsis в словаре LingvoComputer того же Lingvo:

ellipsis
троеточие (как признак пропуска слов или незавершенности действий)

Так что видимо есть такое слово. Вообще же сначала использовал его, потом поменял все на многоточие. Видимо где-то упустил.

[alexxz]

Ну, вообщще, ни Word ни Lingvo не являются критериями. Проверка орфографии и пунктуации в Word для меня сродни гаданию на кофейной гуще.
Результат проверки на компетентном сайте http://gramota.ru/slovari/dic/?word=%F2%F0%EE%E5%F2%EE%F7%ED%E8%E5&all=x .

[lahmatiy]

Ну если так рассуждать, то много каких слов нет в русском языке из тех что есть в статье:
автогенерируемый
контент
схлопнется
псевдо-элемент
подглючивает
глюк
подгрузится
Статья не для демонстрации грамотности и знания русского языка, а несколько для другого и о другом.
Заменил троеточие на многоточие, только для соответствия терминов.

[raquo]

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

[lahmatiy]

В данном случае ставится именно три точки, а не символ многоточие. Тем более, что ellipsis переводится именно как троеточие, и используется термин не для пунктуации (как в русском языке), что важно, а для обозначения что часть текста, точнее набора символов, опущено. То есть вы мне говорите про знак пунктуации, а в статье использовался (теперь уже) термин "признак пропуска слов", который, общепринят, видимо, раз он указывается в словарных статьях.
Ех, нашли до чего докопаться... в коем-то веки русский язык вспомнили... к чему бы это...

[raquo]

Хм, да, в этом случае вы правы. Извиняйте, недопер.

[alexxz]

Признаю свою неправоту в данном случае. Действительно, допустимо использовать слово "троеточие" в просторечии. И, как замечено ниже, действительно, "троеточие" вполне подходящее название для "фигуры из трёх точек".

[shiko_1st]

Многоточие — знак препинания. Потому слово "троеточие" вполне уместно — как и слова "трехногое" или "трехпалое", например.
Так что выбор слова зависит от того, с чем мы имеем дело в данном случае — со знаком препинания, или просто с некой фигурой из трех точек.

[Astralian]

Ничего себе. Вот это труд.
Спасибо.

[lahmatiy]

Мда, UTF рулит :)

[lahmatiy]

Кстати я разобрал что тут написано в UTF8:

Ничего себе. Вот это труд.
Спасибо.

[Apostol]

Привет, Нео! ;)
Пардон, 11001111 11110000 11101000 11100010 11100101 11110010 11000010 00100000 11001101 11100101 11101110 00100001

[DraX]

Автору благодарность за хорошую и интересную статью. В работе пригодилось.

[sandwarrior]

небольшой минус шага4 - текст выделяется не до конца в области перехода в FF

[dantes]

Автору - респект, как раз в проекте предстоит сделать нечто похожее.

[glebofff]

Фоноый png был лишним, как мне кажется.

[artik]

Спасибо за позновательную статью и... за открытие Basis.js :)

[lahmatiy]

То что вы могли открыть весьма старое. Надеюсь скоро будет новый релиз.

[Smerch]

Cпасибо, не часто встретишь такое на хабре.

[altmind]

кажется впервые решение по реализации overflow (на javascript) видел на форуме котерова.

[ctpejlok]

Спасибо за статью!
И у меня есть вопрос на очень близкую тему, буду признателен:
Можно ли как-то заставить Firefox делать принудительные переносы неразрывных строк вида "222222"? IE и Opera по-совему позволяют это делать, а в огнелисе такого найти не смог.

[lahmatiy]

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

[xvoland]

Объёмная и полезная статья, спасибо, было интересно!

[vithar]

Спасибо! Не пробовали использовать Data URL для подключения moz_fix.xml? Если заработает будет минус один HTTP запрос.

[lahmatiy]

Спасибо за наводку :) Как то не подумал вообще в сторону 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;

Тоже минус один запрос, и быстрее срабатывает. Добавил в итоговое решение :)

[vithar]

В GIF эта картинка будет меньше весить.

[lahmatiy]

А давно gif поддерживает полупрозрачность? ;)
Тут необходимо чтобы изображение было полностью прозрачно слева и плавно переставало таким быть справа. То есть полупрозрачный градиент.

[vithar]

Туплю.

[semper]

пнг можно пожать ещё:

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 )

[igoru]

А так пробовали?

[igoru]

<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>

[lahmatiy]

Спасибо за наводку, попробывал. Действительно работает. Единственный минус, не выделяется текст, что в ряде случаев не так критично. Еще раз спасибо :)

[igoru]

Спасибо за статью. Просто решил окончательно разобраться с вопросом, вот и получилось решение. А про выделение как-то забыл.

[igoru]

Лучше заменить description.setAttribute("value",this.innerHTML); на
description.setAttribute("value",this.textContent);.
Иначе не коректно отображаются html entity.

[vintyara]

Один большой минус - создается элемент для обрезанного текста description (xul:description), а он позволяет хранить только текст. В моем варианте может быть не только текст, но и другие элементы. Другие элементы, ествественно, кропать не нужно.

Такое реально? Есть альтернатива description?

[ambientos]

Cпасибо за раскопки :-)

[g1uck]

автору огромное спасибо

[Mew]

Демо страницы отвалились, обновите пжлста

[lahmatiy]

Были временные проблемы с хостингом…

[tarya]

Интересно такое же решение только для блока текста. По последнему примеру поглядел пример и подправил, но точки появляются не в конце всего блока текста, а только в первом ряду. Это не то.

[n0ne]

А где всё?! где исходники или примеры???