lahmatiy Feb 7 2008 at 17:00

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

9 min

14K

Website development *

+53

Comments 48

n1mnul Feb 7 2008 at 17:33

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

nutz Feb 7 2008 at 17:39

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

lahmatiy Feb 7 2008 at 17:44

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

nutz Feb 7 2008 at 17:50

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

alexxz Feb 7 2008 at 17:50

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

-1

lahmatiy Feb 7 2008 at 17:55

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

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

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

alexxz Feb 7 2008 at 18:00

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

lahmatiy Feb 7 2008 at 18:09

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

raquo Feb 7 2008 at 20:23

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

lahmatiy Feb 7 2008 at 22:47

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

raquo Feb 7 2008 at 23:11

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

alexxz Feb 8 2008 at 09:10

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

shiko_1st Feb 7 2008 at 21:42

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

Astralian Feb 7 2008 at 17:56

РќРёС‡РµРіРѕ СЃРµР±Рµ. Р’РѕС‚ СЌС‚Рѕ С‚СЂСѓРґ.
РЎРїР°СЃРёР±Рѕ.

lahmatiy Feb 7 2008 at 18:02

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

lahmatiy Feb 7 2008 at 22:51

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

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

Apostol Feb 8 2008 at 04:03

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

DraX Feb 7 2008 at 18:16

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

sandwarrior Feb 7 2008 at 18:18

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

dantes Feb 7 2008 at 19:13

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

glebofff Feb 7 2008 at 19:19

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

UFO just landed and posted this here

artik Feb 7 2008 at 19:42

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

lahmatiy Feb 7 2008 at 22:35

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

Smerch Feb 7 2008 at 19:56

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

altmind Feb 7 2008 at 20:28

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

ctpejlok Feb 7 2008 at 23:24

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

lahmatiy Feb 8 2008 at 09:44

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

xvoland Feb 8 2008 at 02:01

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

vithar Feb 12 2008 at 19:30

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

lahmatiy Feb 13 2008 at 15:17

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

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

lahmatiy Feb 13 2008 at 15:36

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

vithar Feb 13 2008 at 15:40

Туплю.

semper Aug 30 2010 at 16:44

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

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 Feb 27 2008 at 21:00

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

igoru Feb 27 2008 at 21:28

<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 Feb 29 2008 at 14:56

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

igoru Feb 29 2008 at 15:34

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

igoru Feb 29 2008 at 18:16

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

vintyara Jun 5 2008 at 19:23

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

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

ambientos Aug 31 2009 at 11:03

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

g1uck Sep 2 2009 at 11:43

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

UFO just landed and posted this here

Mew Mar 28 2011 at 11:57

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

lahmatiy Mar 31 2011 at 12:52

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

tarya Dec 14 2011 at 15:26

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

n0ne Nov 21 2012 at 18:05

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