Chrome Chrome  Microsoft edge
Развернуть

Css многоточие в конце. Text-overflow в Firefox и все, все, все

Внедрение 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 сегодня и Вы не пожалеете!

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

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

Как же порой раздражают длинные названия ссылок товаров, - по три строчки, - или длинных заголовков иных блоков. Как было бы здорово, если бы можно было все это дело как-то приужать, сделать компактнее. А при наведении мышкой уже показывать 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, и сайтостроительство не покажется вам такой уж сложной вещью =)


Определяет параметры видимости текста в блоке, если текст целиком не помещается в заданную область. Возможны два варианта: текст обрезается; текст обрезается и к концу строки добавляется многоточие. text-overflow работает в том случае, если для блока значение свойства overflow установлено как auto , scroll или hidden .

Краткая информация

Обозначения

Описание Пример
<тип> Указывает тип значения. <размер>
A && B Значения должны выводиться в указанном порядке. <размер> && <цвет>
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,<время>]*
+ Повторять один или больше раз. <число>+
? Указанный тип, слово или группа не является обязательным. inset?
{A, B} Повторять не менее A, но не более B раз. <радиус>{1,4}
# Повторять один или больше раз через запятую. <время>#
×

Значения

clip Текст обрезается по размеру области. ellipsis Текст обрезается и к концу строки добавляется многоточие.

Пример

text-overflow

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

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

Рис. 1. Многоточие в конце текста

Объектная модель

Объект .style.textOverflow

Примечание

Opera до версии 11 использует свойство -o-text-overflow .

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации ) - первая черновая версия стандарта.
×

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

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

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

Используем overflow

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

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

HTML5 CSS3 IE Cr Op Sa Fx

Текст

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

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

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

Добавляем градиент к тексту

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

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

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

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

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

Текст

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

Данный метод не работает в браузере 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

Текст

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

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

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

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