Троеточие в конце строки средствами CSS. Text-overflow в Firefox и все, все, все Окончательный код для всех браузеров

Влад Мержевич

Несмотря на то, что мониторы больших диагоналей становятся всё доступнее, а их разрешение постоянно растёт, иногда возникает задача в ограниченном пространстве уместить много текста. Например, это может понадобиться для мобильной версии сайта или для интерфейса, в котором важно число строк. В подобных случаях имеет смысл обрезать длинные строки текста, оставив только начало предложения. Так мы приведём интерфейс к компактному виду и сократим объём выводимой информации. Само обрезание строк можно делать на стороне сервера с помощью того же PHP, но через CSS это проще, к тому же всегда можно показать текст целиком, например, при наведении на него курсора мыши. Далее рассмотрим методы, как текст порезать воображаемыми ножницами.

На деле всё сводится к использованию свойства overflow со значением hidden . Различия лишь кроются в разном отображении нашего текста.

Чтобы свойство overflow показало себя с текстом во всей красе, надо отменить перенос текста с помощью white-space со значением nowrap . Если это не сделать, то нужного нам эффекта не будет, в тексте добавятся переносы и он будет отображаться весь целиком. В примере 1 показано, как обрезать длинный текст указанным набором стилевых свойств.

Пример 1. overflow для текста

HTML5 CSS3 IE Cr Op Sa Fx

Текст .size { white-space: nowrap; /* Отменяем перенос текста */ overflow: hidden; /* Обрезаем содержимое */ background: #fc0; /* Цвет фона */ padding: 5px; /* Поля */ }

Результат данного примера показан на рис. 1.

Рис. 1. Вид текста после применения свойства overflow

Как видно из рисунка, недостаток в целом один - не очевидно что текст имеет продолжение, так что надо дать об этом понять пользователю. Для этого обычно применяется градиент или многоточие.

Чтобы стало понятнее, что текст справа не заканчивается, поверх него можно наложить градиент от прозрачного цвета к цвету фона (рис. 2). При этом будет создаваться эффект постепенного растворения текста.

Рис. 2. Текст с градиентом

В примере 2 показано создание этого эффекта. Стиль самого элемента практически останется прежним, сам же градиент будем добавлять с помощью псевдоэлемента ::after и CSS3. Для этого вставляем пустой псевдоэлемент через свойство content и к нему применяем градиент с разными префиксами для основных браузеров (пример 2). Ширину градиента легко изменять через width , также можно регулировать степень прозрачности, заменив значение 0.2 на своё.

Пример 2. Градиент поверх текста

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

Текст .size { white-space: nowrap; /* Отменяем перенос текста */ overflow: hidden; /* Обрезаем содержимое */ padding: 5px; /* Поля */ background: #fc0; /* Цвет фона */ position: relative; /* Относительное позиционирование */ } .size::after { content: ""; /* Выводим элемент */ position: absolute; /* Абсолютное позиционирование */ right: 0; top: 0; /* Положение элемента */ width: 40px; /* Ширина градиента*/ height: 100%; /* Высота родителя */ /* Градиент */ background: -moz-linear-gradient(left, rgba(255,204,0, 0.2), #fc0 100%); background: -webkit-linear-gradient(left, rgba(255,204,0, 0.2), #fc0 100%); background: -o-linear-gradient(left, rgba(255,204,0, 0.2), #fc0 100%); background: -ms-linear-gradient(left, rgba(255,204,0, 0.2), #fc0 100%); background: linear-gradient(to right, rgba(255,204,0, 0.2), #fc0 100%); }

Внутридискретное арпеджио трансформирует полиряд, это и есть одномоментная вертикаль в сверхмногоголосной полифонической ткани.

Данный метод не работает в браузере Internet Explorer до версии 8.0 включительно, потому что в нём нет поддержки градиентов. Но можно отказаться от CSS3 и сделать градиент по старинке, через картинку в формате PNG-24.

Этот метод сочетается только с однотонным фоном и в случае фоновой картинки градиент поверх текста будет бросаться в глаза.

Вместо градиента в конце обрезанного текста также можно использовать многоточие. Причём оно будет добавляться автоматически с помощью свойства text-overflow . Его понимают все браузеры, включая старые версии IE, и единственным недостатком этого свойства является пока его неясный статус. В CSS3 вроде это свойство входит, но код с ним не проходит валидацию.

В примере 3 показано применение свойства text-overflow со значением ellipsis , которое добавляет многоточие. При наведении курсора мыши на текст, он отображается целиком и подсвечивается фоновым цветом.

Пример 3. Использование text-overflow

HTML5 CSS3 IE Cr Op Sa Fx

Текст .size { white-space: nowrap; /* Отменяем перенос текста */ overflow: hidden; /* Обрезаем содержимое */ padding: 5px; /* Поля */ text-overflow: ellipsis; /* Многоточие */ } .size:hover { background: #f0f0f0; /* Цвет фона */ white-space: normal; /* Обычный перенос текста */ } Бессознательное вызывает контраст, это обозначено Ли Россом как фундаментальная ошибка атрибуции, которая прослеживается во многих экспериментах.

Результат данного примера показан на рис. 3.

Рис. 3. Текст с многоточием

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

Многие наверняка сталкивались с проблемой, когда какой-нибудь текст нужно выводить в одну строку. При этом текст может быть весьма длинным, а ширина блока, в котором этот текст находится, обычно ограничена, хотя бы тем же размером окна браузера. На эти случаи придумано свойство text-overflow , которое внесено в рекомендацию CSS3 , а впервые было реализовано в IE6, очень давно. В случае использования этого свойства для блока, если его текст больше по ширине чем сам блок, то текст обрезается и в конце ставится многоточие. Хотя тут не все так просто, но вернемся к этому чуть позже.
С Internet Explorer"ом все понятно, что же относительно других браузеров? И хотя в настоящий момент из спецификации CSS3 свойство text-overflow исключено, Safari его поддерживает (по крайней мере, в 3-й версии), Opera тоже (с 9-й версии, правда называется свойство -o-overflow-text). А Firefox - нет, не поддерживает, и даже в 3-й версии не будет. Печально, но факт. Но может можно что-то сделать?

Сделать, конечно, можно. Когда искал в интернете по поводу этого свойства, и как с этим в Firefox, наткнулся на с простым решением. Суть решения:

Вот и все. Детали читайте в статье.
Решение не плохое, но есть проблемы:

Для начала сосредоточимся на второй проблеме, а именно, как избежать отображения многоточия когда это не нужно. Поломав голову и «немного» поэкспериментировав, нашел некоторое решение. Попробую объяснить.
Суть в том, что нам нужен отдельный блок с многоточием, который будет появляться только тогда, когда текст занимает слишком много пространства по ширине. Тут мне пришла идея о сваливающемся плавающем блоке. Хоть и звучит страшно, но тут, всего лишь, имеется ввиду блок, который есть всегда, и прижат вправо, но когда ширина текста становится большой, текст выталкивает блок на следующую линию.
Перейдем к практике, иначе сложно объяснить. Зададим HTML структуру:

Пока же разберем сделанное. Во-первых, мы задаем line-height и height основного блока, так как нам нужно знать высоту блока и высоту текстовой линии. Это же значение мы задаем для margin-top блока с многоточием, но с отрицательным значением. Таким образом, когда блок не «сброшен» на следующую линию, то будет выше строки текста (на одну линию), когда сбросится - будет на ее уровне (на самом деле он ниже, просто мы делаем оттяжку на одну линию вверх). Что бы скрыть лишнее, особенно когда не нужно показывать многоточие, мы делаем overflow: hidden для основного блока, таким образом, когда многоточие будет выше линии - оно не будет показываться. Это же позволяет нам убрать и, выпадающий за пределы блока (в правый край), текст. Чтобы текст неожиданно не переносился и не выталкивал блок с многоточием все ниже и ниже, мы делаем white-space: nowrap, тем самым запрещая переносы - наш текст будет всегда в одну строку. Для блока с текстом мы поставили float: left, чтобы он сразу же не сваливал блок с многоточием и занимал минимальную ширину. Так как внутри основного блока (DIV.ellipsis) оба блока плавающие (float: left/right), то основной блок схлопнется, когда блок с текстом будет пустой, поэтому для основного блока мы выставили фиксированную высоту (height: 1.2em). Ну и последнее, используем псевдо-элемент::after для отображения многоточия. Для этого псевдо-элемента так же задаем фон, чтобы перекрыть текст который окажется под ним. Мы задали рамку для основного блока, только для того чтобы увидеть габариты блока, позже мы ее уберем.
Если бы Firefox, так же хорошо поддерживал псевдо-элементы, как Opera и Safari, в плане их позиционирования (задания для них position/float etc), то можно было бы не использовать отдельный блок для многоточия. Попробуйте заменить последние 3 правила, на следующий:

Как вы могли заметить, мы избавились от проблемы появления многоточия, когда текст умещается в блок. Однако, у нас осталась еще одна проблема - текст обрезается посередине букв. И к тому же в IE это не работает. Чтобы побороть и то и другое, нужно использовать родное правило text-overflow для браузеров, и только для Firefox использовать описанное выше решение (альтернативы нет). Как сделать решение «только для Firefox» разберемся позже, а сейчас попробуем заставить работать то что есть с использованием text-overflow. Подправим CSS:

Когда я в очередной раз заглянул на страничку (перед тем как собирался писать эту статью), упоминаемую в самом начале, то, интереса ради, проглядел комментарии, на предмет умных смежных идей. И нашел , в комментарии, где говорилось о другом решении, которое работает в Firefox и IE (для этого человека, как и для автора первой статьи, других браузеров, видимо, не существует). Так вот, в этом решении, автор несколько иначе борется с данным явлением (отсутствием text-overflow), навешивая обработчики на события overflow и underflow элементам, для которых нужно было ставить многоточие при необходимости. Не плохо, но мне кажется это решение очень дорогое (в плане ресурсов), тем более что оно у него несколько подглючивает. Однако, разбираясь, как он этого добился, наткнулся на интересную штуку, а именно CSS свойство -moz-binding. Насколько я понял, это аналог behaviour в IE, только под другим соусом и покруче. Но не будем углубляться в детали, скажем только, что таким способом можно повесить JavaScript обработчик на элемент с помощью CSS. Звучит странно, но это работает. Что мы делаем:

На этом месте можно было бы поставить точку, но хотелось бы немного улучшить наше решение. Раз мы можем повесить constructor на любой блок и соответственно получаем над ним контроль, почему бы не воспользоваться этим. Упростим нашу структуру:

Приведу небольшой пример , для сторонней верстки. Я взял оглавление одной из страниц Wikipedia (первое что подвернулось), и применил для него описанный выше метод.
Вообще же данное решение можно назвать универсальным лишь с натяжкой. Все зависит от вашей верстки и ее сложности. Возможно, понадобится напильник, а может и бубен. Хотя в большинстве случаев, я думаю, работать будет. И потом, у вас теперь есть отправная точка;)
Надеюсь, вы почерпнули из статьи что-то интересное и полезное;) Учитесь, экспериментируйте, делитесь.
Удачи!

Как же порой раздражают длинные названия ссылок товаров, - по три строчки, - или длинных заголовков иных блоков. Как было бы здорово, если бы можно было все это дело как-то приужать, сделать компактнее. А при наведении мышкой уже показывать title полностью.

Для этого нам на помощь придет наш любимый CSS. Все очень просто, смотрите.

Допустим, у нас есть вот такой блок из каталога с товарами:

Вот его структура:

Чудо-юдо силопридаватель вечерний, таинственный, арт. 20255-59

Замечательный товар по супер-цене, всего за 100 руб. Скрасит ваши одинокие вечера и даст прилив жизненных сил!

Вот его стили:

Someblock{ border: 1px solid #cccccc; margin: 15px auto; padding: 10px; width: 250px; } .header{ border-bottom: 1px dashed; font-size: 16px; font-weight: bold; margin-bottom: 12px; }

Согласитесь, выглядит ужасно. Конечно, можно сократить название товара. Но что делать, если таких сотни или тысячи? Можно также средствами php обрезать часть названия, ограничившись каким-то количеством символов. Но что делать, если потом поменяется верстка и блоки будут меньше или наоборот раза в 2-3 больше? Все это не вариант, все это нам не подходит.

И тут нам на помощь приходит CSS и его волшеблое свойство text-overflow . Но его нужно правильно использовать совместно с несколькими другими свойствами. Ниже я покажу вам готовое решение, после чего объясню что к чему.

Итак, отодвинув в сторону ручное редактирование названий товаров и программную обрезку стилей, мы берем в руки CSS и смотрим, что у нас получится:

Чудо-юдо силопридаватель вечерний, таинственный, арт. 20255-59

Замечательный товар по супер-цене, всего за 100 руб. Скрасит ваши одинокие вечера и даст прилив жизненных сил!

Ну как, лучше? По-моему очень даже! А поднесите мышку к названию... вуаля! Вот оно нам показывается полностью.

В структуре у нас ничего не поменялось, я лишь добавил диву с классом .header тег title. А вот новые, дополненные стили:

Someblock{ border: 1px solid #cccccc; margin: 15px auto; padding: 10px; width: 250px; } .header{ border-bottom: 1px dashed; font-size: 16px; font-weight: bold; margin-bottom: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

Смотрите, что мы сделали:

• Мы добавили блоку свойство white-space: nowrap , которое убирает у текста возможность переноса слов на новую строку, тем самым вытягивая его в линию;
• Затем мы добавили свойство overflow: hidden , которое ограничило видимость нашей строки шириной блока, тем самым обрезая все лишнее и не показывая его посетителю;
• Ну и в конце мы добавили троеточие к нашей строке посредствам свойства text-overflow: ellipsis , тем самым давая посетителю понять, что это не конец строки, и что нужно, наверное, поднести мыщку и посмотреть ее полностью.

Любите CSS, изучайте CSS, и сайтостроительство не покажется вам такой уж сложной вещью =)

Внедрение CSS3 влечет за собой революционные изменения в ежедневные будни веб дизайнеров. CSS3 не перестает нас удивлять каждый день. Вещи, которые раньше можно было сделать только с помощью javascript, теперь легко делаются с CSS3. Так, например, свойство Text-Overflow.

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

С CSS3 мы можем легко это осуществить, используя свойство CSS text-overflow

Разметка

Text-overflow: ellipsis;

Значение ellipsis позволяет после текста добавить троеточие (...)

Свойство text-overflow: ellipsis полезно когда:

1. Текст выходит за пределы ячейки
2. В ячейке есть свободное пространство: nowrap.

У нас есть div c шириной 150 пикселей для отображения названия компаний из базы данных. Но при этом мы не хотим, чтобы длинные названия компаний перескакивали на новую строку и портили внешний вид таблицы. То есть нам необходимо спрятать текст, которые выходит за границы 150 пикселей. Мы также хотим сообщить пользователю об этом. Чтобы он имел ввиду, что отображается не все название. И мы хотим, чтобы при наведении мышки, отображался весь текст.

Давайте взглянем как мы можем это сделать с помощью CSS3.

Company-wrap ul li {
text-overflow: ellipsis;
overflow: hidden;
white-space:nowrap; }

• Company Name


• Envestnet Asset Management


• Russell Investments


• Northwestern Mutual Financial Network


• ING Financial Networks

Поддержка браузеров

С поддержкой среди браузеров у данного свойства есть один маленький ньюанс. Все, кроме firefox, отлично отображают верно. Но, к счатью, есть решение и этой проблемы!

Троеточие в Firefox

К сожалению, gecko (движок вывода страниц в) Firefox не поддерживает это свойство. Однако данный браузер поддерживает XBL , с помощью которого мы и будем выходить из данной ситуации.

Gecko — это свободный движок вывода веб-страниц (англ. layout engine) браузеров Mozilla Firefox, Netscape и других. Старые названия — «Raptor» и «NGLayout». Главная концепция Gecko заключается в поддержке открытых стандартов Интернета, таких как HTML, CSS, W3C DOM, XML 1.0 и JavaScript. Другая концепция — кросс-платформенность. На сегодняшний день Gecko работает на операционных системах Linux, Mac OS X, FreeBSD и Microsoft Windows, а также на Solaris, HP-UX, AIX, Irix, OS/2, OpenVMS, BeOS, Amiga и других.

Для отображения троеточия в firefox, нам необходимо добавить одну строку в таблицу стилей.

если захотите свойство отключить, просто добавьте:

Moz-binding: url("bindings.xml#none");

Следующий шаг - создание файла bindings.xml в том же месте, где хранится таблица стилей. Мы можем использовать любой текстовый редактор для этого! Скопируйте код ниже и назовите файл bindings.xml.

document.getAnonymousNodes(this)[ 0 ]
this.label.style
this.style.display
if(this.style.display != val) this.style.display= val

this.label.value
if(this.label.value != val) this.label.value= val



var strings= this.textContent.split(/\s+/g)
if(!strings[ 0 ]) strings.shift()
if(!strings[ strings.length - 1 ]) strings.pop()
this.value= strings.join(" ")
this.display= strings.length ? "" : "none"


this.update()


this.update()

Окончательный код для всех браузеров

Company-wrap ul li {
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-moz-binding: url("bindings.xml#ellipsis");
white-space: nowrap;
overflow: hidden;
}

CSS3 становится главным инструментов веб дизайнера по всему миру для создания невиданных ранее сайтов с минимум кода. Существуют простые, буквально в одну строку, решения, которые ранее были возможны только с помощью Photoshop или javascript. Начните изучение возможностей CSS3 и HTML5 сегодня и Вы не пожалеете!

Чтобы выделяться из серой массы переводчиков и завоевать Ваши симпатии, уважаемые читатели, в конце моих уроков будут мудрые мысли и афоризмы. Каждый в этих строках найдет что-то свое:)

Переноси с достоинством то, что изменить не можешь.