Css overflow многоточие. Троеточие в конце строки средствами CSS

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

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

Используем overflow

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

Текст в одну строку и троеточие в конце CSS

Текст в одну строку и троеточие в конце. Как это сделать? Text in one line and ellipses at the end.

Для этого есть замечательное CSS3 свойство text-overflow.

Это свойство определяет параметры видимости текста в блоке, если текст полностью не помещается в область видимости. Есть 2 варианта: текст просто обрезается, или текст обрезается и к концу строки добавится многоточие. text-overflow работает только если блоку присвоено свойство overflow со значением hidden или auto или scroll. Также нужно применить свойство white-space с параметром nowrap что скажет браузеру не переносить текст на новую строку.

Значения text-overflow:

clip — Текст который не помещается обрезается.

ellipsis — Текст обрезается и в конце мы увидим троеточие.

Пример использования:

Если вы знаете другие варианты или нашли недочеты в статье — пишите в комментариях, обязательно подправим.

Троеточие в конце строки средствами CSS. Обрезка одно-, или многострочного текста по высоте с добавлением многоточия Троеточие css

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

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

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

1. Текст может обрезаться посередине (условно говоря) буквы, и мы увидим ее «обрубок».
2. Многоточие отображается всегда, даже когда текст меньше ширины блока (то есть не выпадает из него и многоточие не нужно).

Шаг первый

Для начала сосредоточимся на второй проблеме, а именно, как избежать отображения многоточия когда это не нужно. Поломав голову и «немного» поэкспериментировав, нашел некоторое решение. Попробую объяснить.
Суть в том, что нам нужен отдельный блок с многоточием, который будет появляться только тогда, когда текст занимает слишком много пространства по ширине. Тут мне пришла идея о сваливающемся плавающем блоке. Хоть и звучит страшно, но тут, всего лишь, имеется ввиду блок, который есть всегда, и прижат вправо, но когда ширина текста становится большой, текст выталкивает блок на следующую линию.
Перейдем к практике, иначе сложно объяснить. Зададим 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, это к элементу, для которого сработал селектор, добавляет класс moz-ellipsis. Это будет работать только в Firefox (gecko браузерах?), поэтому только в нем к элементам будет добавлен класс moz-ellipsis, и мы можем для этого класса дописать дополнительные правила. Чего и добивались. Не совсем уверен относительно необходимости this.style.mozBinding = «», но по опыту с expression лучше перестраховаться (вообще я слабо знаком с этой стороной Firefox, потому могу заблуждаться).
Вас может насторожить, что в данном приеме используется внешний файл и вообще JavaScript. Пугаться не стоит. Во первых если файл не подгрузится и/или JavaScript отключен и не сработает, ничего страшного, пользователь просто не увидит многоточия в конце, текст будет обрезаться по окончанию блока. То есть в данном случае получаем «unobtrusive» решение. Можете сами убедиться .

Таким образом, мы получили стиль для браузеров «большой четверки», который реализует text-overflow для Opera, Safari & IE, а для Firefox его эмулирует, не ахти как, но это лучше чем ничего.

Шаг четвертый

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

Смотрим и радуемся жизни.

На этом и поставим точку.

Заключение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Значение 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, нам необходимо добавить одну строку в таблицу стилей.

• 

Мы принимаем к оплате:

«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов.

«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!

Троеточие css в конце

Свойство text-overflow

Трепачёв Д.П. © 2012-2018 г.

Ученикам: я ухожу на каникулы с 21-го декабря по 8 января. Буду не онлайн, хотя иногда возможно буду появляться.

Свойство text-overflow добавляет троеточие в конец обрезанного текста в знак того, что текст не помещался в блок и был обрезан. Имейте ввиду, что данное свойство не обрезает текст (для этого надо использовать свойство overflow).

Речь идет именно о тексте, а не о картинках и других блоках, см. для этого overflow.

Внимание! Для работы text-overflow текст должен быть обрезан через свойство overflow (или overflow-x) в значении hidden, auto или scroll. Если задано visible (а так и есть по умолчанию!) — text-overflow работать не будет.

Синтаксис

Значения

Значение Описание

ellipsis	Добавляет в конец обрезанного текста троеточие.
clip	Не добавляет троеточие в конец (это значение по умолчанию, нужно для отмены действия свойства при необходимости).
inherit	Наследует значение родителя.

Значение по умолчанию: clip.

Примеры

Пример . Ничего не задано или задан text-overflow: visible

В данном примере очень длинное слово не поместится в контейнер и вылезет за его границы. Обрезания не происходит:

Результат выполнения кода:

Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur ещеоднооченьдлинноооооооооооооооооооооооооеслово adipiscing elit.

Пример . Добавим свойство overflow

Сейчас все, что вылезло за границы контейнера, просто обрежется:

Результат выполнения кода:

Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur ещеоднооченьдлинноооооооооооооооооооооооооеслово adipiscing elit.

Пример . Значение ellipsis

Сейчас, в дополнение к свойству overflow, добавим text-overflow в значении ellipsis. Обрезанному тексту добавится троеточие в конец:

Результат выполнения кода:

Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur ещеоднооченьдлинноооооооооооооооооооооооооеслово adipiscing elit.

Пример . Если задать overflow: auto и text-overflow: ellipsis

Если задать overflow: auto и text-overflow: ellipsis, то появится полоса прокрутки, но троеточие по-прежнему будет добавлено. Попробуйте прокрутить полосу прокрутки в примере:

Результат выполнения кода:

Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur ещеоднооченьдлинноооооооооооооооооооооооооеслово adipiscing elit.

Пример . Если нет очень длинных слов

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

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Однако, бывают ситуации, когда мы хотим, чтобы текст обрезался, если он слишком длинный (текст вообще, а не отдельные слова) и не переносился на следующую строку. Это делается с помощью добавления свойства white-space в значении nowrap, которое запретит перенос текста на другую строку. Посмотрите на пример, теперь текст обрезается:

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Если задать ширину блока в %, то обрезание тоже будет работать корректно:

Откройте этот пример по следующей ссылке и поуменьшайте окно браузера — текст будет обрезаться именно по текущему размеру блока и будет добавляться троеточие.

Веб-заметки и Веб-подсказки

У CSS есть замечательное свойство text-overflow со значением ellipsis которое позволяет ограничивать длину текста добавляя три точки если текст не помещается полностью. Это позволяет добиться эстетичного эффекта и не ломать дизайн. Но иногда бывает, что это свойство не срабатывает как бы на хотелось. В чем же может быть причина?

Демонстрация проблемы: text-overflow: ellipsis;

Слишком длинный текст, который должен быть обрезан, и должно быть добавлено троеточие в конце. Если текст помещается, то троеточие добавлено не будет. Этот текст используется для демонстрации.

Дело в том, что область в которую помещен слишком длинный текст должна быть ограниченной. Что это значит: Блок не должен растягиваться под влиянием текста «overflow: hidden» и текст не должен «стремится пригнуть» на 2-ю строчку «white-space: nowrap».

Демонстрация решения проблемы: text-overflow: ellipsis; overflow: hidden; white-space: nowrap;

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

Обрезание с многоточием

Сделаем обрезание текста с заменой последних символов на многоточие для текста, который не помещается в каком-либо элементе

Студия Лебедева порадовала нас новым творением — обновился интернет-магазин Техносилы. Все мило и, как обычно в последнее время у Лебедева, лаконично, но…

Что мы видим на первой же странице:

Названия товаров не помещаются и просто обрезаются свойством overflow: hidden Не очень красиво, я бы сказал. Но ведь есть же замечательное, но крайне редко используемое (мне ни разу не попадалось на глаза его использование) свойство text-overflow: ellipsis.сайт источник http://yapro.ru Mon Feb 15 2010 10:43:51 GMT+0300

Что удивительно, это свойство поддерживает дружное семейство браузеров по имени Internet Explorer. Это свойство имеет два (согласно с сайтом MS) значения: clip (по умолчанию) и ellipsis, что в сочетании со свойством overflow: hidden дает замечательный результат: текст, который не помещается в каком-либо элементе обрезается с заменой последних символов на многоточие. Получается очень аккуратно и симпатично.

А вот и примеры:

Для тех, кто просматривается данную страницу в браузере Firefox, посмотрите на изображение того, как это выглядит в IE:

Некоторые браузеры, в частности Opera, требуют своего префикса для этого свойства. MSDN рекомендует так же использовать префикс -ms для ИЕ8, но понимает это свойство и без него.

Оказывается Хром 2 и Сафари 4 понимают без префиксов, а ФайрФокс 3 не понимает вовсе.

Если Вы не жалаете использовать это свойство, то снабдите заголовок соответствующей всплывающей подсказкой, хотя бы в виде title.

Ограничение длины отображения текста в строке с помощью CSS

В шаблонах WordPress как и в других CMS для формирования элементов оформления используются динамические данные. К примеру в заголовке списка комментариев может применяться название самой статьи к которой эти комментарии относятся:

Такое оформление замечательно работает пока текст (в нашем примере это название статьи) короткий и не превышает длину строки отведенную для оформления заголовка комментариев. А если название статьи длинное, то результат будет выглядеть примерно следующим образом:

То есть длинное название будет выводиться в две и более строк. Возникает резонный вопрос, как же обрезать текст так, чтобы он помещался в одну строку? Я предлагаю использовать небольшой код на CSS, если вас как и меня не устраивает то, что теперь надпись отображается в две строки.

Как обрезать отображаемую длину строки на CSS

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

Здесь white-space со значением nowrap отменяет перенос строки, overflow со значением hidden скрывает лишнее, а text-overflow со значением ellipsis вставляет троеточие в конце. Последний стиль я использовал для красоты оформления и он не является обязательным для решения нашей задачи. Результат работы примера стилей ограничения длины строки описанного выше:

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