Мы принимаем к оплате:
«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!
«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!
А также:
Троеточие css в конце
Свойство text-overflow
Трепачёв Д.П. © 2012-2018 г.
Ученикам: я ухожу на каникулы с 21-го декабря по 8 января. Буду не онлайн, хотя иногда возможно буду появляться.
Свойство text-overflow добавляет троеточие в конец обрезанного текста в знак того, что текст не помещался в блок и был обрезан. Имейте ввиду, что данное свойство не обрезает текст (для этого надо использовать свойство overflow).
Речь идет именно о тексте, а не о картинках и других блоках, см. для этого overflow.
Внимание! Для работы text-overflow текст должен быть обрезан через свойство overflow (или overflow-x) в значении hidden, auto или scroll. Если задано visible (а так и есть по умолчанию!) - text-overflow работать не будет.
Синтаксис
селектор { text-overflow: ellipsis | clip | inherit; }Значения
ellipsis | Добавляет в конец обрезанного текста троеточие. |
clip | Не добавляет троеточие в конец (это значение по умолчанию, нужно для отмены действия свойства при необходимости). |
inherit | Наследует значение родителя. |
Значение по умолчанию: clip.
Примеры
Пример . Ничего не задано или задан text-overflow: visible
В данном примере очень длинное слово не поместится в контейнер и вылезет за его границы. Обрезания не происходит:
p { width: 200px; overflow: visible; border: 1px solid red; }Результат выполнения кода:
Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur ещеоднооченьдлинноооооооооооооооооооооооооеслово adipiscing elit.
Пример . Добавим свойство overflow
Сейчас все, что вылезло за границы контейнера, просто обрежется:
p { width: 200px; overflow: hidden; или overflow-x: hidden - разницы нет border: 1px solid red; }Результат выполнения кода:
Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur ещеоднооченьдлинноооооооооооооооооооооооооеслово adipiscing elit.
Пример . Значение ellipsis
Сейчас, в дополнение к свойству overflow, добавим text-overflow в значении ellipsis. Обрезанному тексту добавится троеточие в конец:
p { width: 200px; overflow: hidden; или overflow-x: hidden - разницы нет -o-text-overflow: ellipsis; text-overflow: ellipsis; border: 1px solid red; }Результат выполнения кода:
Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur ещеоднооченьдлинноооооооооооооооооооооооооеслово adipiscing elit.
Пример . Если задать overflow: auto и text-overflow: ellipsis
Если задать overflow: auto и text-overflow: ellipsis, то появится полоса прокрутки, но троеточие по-прежнему будет добавлено. Попробуйте прокрутить полосу прокрутки в примере:
p { width: 200px; overflow: auto; или overflow-x: auto - разницы нет -o-text-overflow: ellipsis; text-overflow: ellipsis; border: 1px solid red; }Результат выполнения кода:
Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur ещеоднооченьдлинноооооооооооооооооооооооооеслово adipiscing elit.
Пример . Если нет очень длинных слов
Если нет на столько длинных слов, чтобы они вылазили за границу контейнера, то обрезания не произойдет (ничего же не вылазит). Посмотрите следующий пример:
p { width: 200px; overflow: hidden; или overflow-x: hidden - разницы нет -o-text-overflow: ellipsis; text-overflow: ellipsis; border: 1px solid red; }Результат выполнения кода:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Однако, бывают ситуации, когда мы хотим, чтобы текст обрезался, если он слишком длинный (текст вообще, а не отдельные слова) и не переносился на следующую строку. Это делается с помощью добавления свойства white-space в значении nowrap, которое запретит перенос текста на другую строку. Посмотрите на пример, теперь текст обрезается:
p { width: 200px; overflow: hidden; или overflow-x: hidden - разницы нет white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; border: 1px solid red; }Результат выполнения кода:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Если задать ширину блока в %, то обрезание тоже будет работать корректно:
p { width: 80%; overflow: hidden; или overflow-x: hidden - разницы нет white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; border: 1px solid red; }Откройте этот пример по следующей ссылке и поуменьшайте окно браузера - текст будет обрезаться именно по текущему размеру блока и будет добавляться троеточие.
Веб-заметки и Веб-подсказки
У 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.
Источник: starhack.ru
Ограничение длины отображения текста в строке с помощью CSS
В шаблонах WordPress как и в других CMS для формирования элементов оформления используются динамические данные. К примеру в заголовке списка комментариев может применяться название самой статьи к которой эти комментарии относятся:
Такое оформление замечательно работает пока текст (в нашем примере это название статьи) короткий и не превышает длину строки отведенную для оформления заголовка комментариев. А если название статьи длинное, то результат будет выглядеть примерно следующим образом:
То есть длинное название будет выводиться в две и более строк. Возникает резонный вопрос, как же обрезать текст так, чтобы он помещался в одну строку? Я предлагаю использовать небольшой код на CSS, если вас как и меня не устраивает то, что теперь надпись отображается в две строки.
Как обрезать отображаемую длину строки на CSS
Для того, чтобы текст даже самый длинный отображался в одну строку и лишние буквы при этом обрезались воспользуйтесь следующими CSS стилями для блока где будут отображаться длинные названия, которые необходимо укоротить:
.css-class { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }Здесь white-space со значением nowrap отменяет перенос строки, overflow со значением hidden скрывает лишнее, а text-overflow со значением ellipsis вставляет троеточие в конце. Последний стиль я использовал для красоты оформления и он не является обязательным для решения нашей задачи. Результат работы примера стилей ограничения длины строки описанного выше:
Как видите все замечательно работает. Длинный текст обрезается и теперь умещается в одну строку. Следует учесть, что указанные выше пример кода стилей корректно отображается только в браузерах поддерживающих стандарты CSS3 и HTML5. Впрочем на момент написание этой статьи все современные браузеры удовлетворяют этим условиям.
Благодарности
При написании статьи были использованы следующие источники:
- http://htmlbook.ru/blog/obrezaem-dlinnuyu-stro
Поделись этой страницей с друзьями!