Css троеточие. Text-overflow в Firefox и все, все, все

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

Такая задача является довольно распространенной, в то же время она есть не такой тривиальной, как кажется.

В этом случае можно использовать свойство text-overflow: ellipsis . При этом контейнер должен иметь свойство overflow равное hidden или clip

Block { width : 250px ; white-space : nowrap ; overflow : hidden ; text-overflow : ellipsis ; }

Первый способ обрезать многострочный текст с использованием CSS свойств применить псевдо-элементы :before и :after . Для начала HTML-разметка

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

А теперь и сами свойства

Box { overflow : hidden ; height : 200px ; width : 300px ; line-height : 25px ; } .box :before { content : "" ; float : left ; width : 5px ; height : 200px ; } .box > * :first-child { float : right ; width : 100% ; margin-left : -5px ; } .box :after { content : "\02026" ; box-sizing : content-box ; float : right ; position : relative ; top : -25px ; left : 100% ; width : 3em ; margin-left : -3em ; padding-right : 5px ; text-align : right ; background-size : 100% 100% ; background : linear-gradient (to right , rgba (255 , 255 , 255 , 0 ), white 50% , white ); }

Еще один способ - использовать свойство column-width с помощью которого задаем ширину колонки для многострочного текста. Правда, при использовании этого способа установить в конце многоточие неполучится. HTML:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Block { overflow : hidden ; height : 200px ; width : 300px ; } .block__inner { -webkit-column-width : 150px ; -moz-column-width : 150px ; column-width : 150px ; height : 100% ; }

Третий способ решение для многострочного текста на CSS есть для браузеров Webkit . В нем нам прийдется использовать сразу несколько специфичных свойств с префиксом -webkit . Основным является -webkit-line-clamp которое позволяет указать количество выводимых в блоке строк. Решение красивое но довольно ограниченное за счет своей работы в ограниченной группе браузеров

Block { overflow : hidden ; text-overflow : ellipsis ; display : -webkit-box ; -webkit-line-clamp : 2 ; -webkit-box-orient : vertical ; }

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

var block = document . querySelector (".block" ), text = block . innerHTML , clone = document . createElement ("div" ); clone . style . position = "absolute" ; clone . style . visibility = "hidden" ; clone . style . width = block . clientWidth + "px" ; clone . innerHTML = text ; document . body . appendChild (clone ); var l = text . length - 1 ; for (; l >= 0 && clone . clientHeight > block . clientHeight ; -- l ) { clone . innerHTML = text . substring (0 , l ) + "..." ; } block . innerHTML = clone . innerHTML ;

Это же в виде плагина для jQuery:

(function ($ ) { var truncate = function (el ) { var text = el . text (), height = el . height (), clone = el . clone (); clone . css ({ position : "absolute" , visibility : "hidden" , height : "auto" }); el . after (clone ); var l = text . length - 1 ; for (; l >= 0 && clone . height () > height ; -- l ) { clone . text (text . substring (0 , l ) + "..." ); } el . text (clone . text ()); clone . remove (); }; $ . fn . truncateText = function () { return this . each (function () { truncate ($ (this )); }); }; }(jQuery ));

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

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

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

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

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

text-overflow p.clip { white-space: nowrap; /* Запрещаем перенос строк */ overflow: hidden; /* Обрезаем все, что не помещается в область */ background: #fc0; /* Цвет фона */ padding: 5px; /* Поля вокруг текста */ text-overflow: ellipsis; /* Добавляем многоточие */ }

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

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

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

Объект .style.textOverflow

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

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

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

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