О проекте | Услуги  | 

Удаленная работа
для творческих личностей

dimaninc
VIP аккаунт
[dimaninc] рейтинг: 1001.69
Веб-проекты любой сложности

compass
[compass] рейтинг: 43.62
Контент для ваших сайтов от 100 руб./1000 знаков. Опыт работы - более 6 лет. Быстрое исполнение заказов в соответствии с ТЗ. Пишите!

ICQ: 250-250-500
Skype: slava_zotov
Telegram: zotov_va
Почта: sitmail@mail.ru
Хотите опередить других фрилансеров?

интересное  |  блоги

фрилансеры  |  рейтинг

sunnyshine
[sunnyshine] рейтинг: 1992.29
В портфолио 172 работы
st_valentin
[st_valentin] рейтинг: 1985.60
В портфолио 321 работа
v-grebennikov
[v-grebennikov] рейтинг: 1380.55
В портфолио 1797 работ
dimaninc
VIP аккаунт
[dimaninc] рейтинг: 1001.69
В портфолио 69 работ
stg
[stg] рейтинг: 831.44
В портфолио 211 работ

работы  |  лучшие

интересное  |  статьи

фрилансеры  |  свежак

nadi644
[nadi644] рейтинг: 0.00
Зарегистрирован 28.03.2017 16:38
В портфолио нет работ
stevendop
[stevendop] рейтинг: 0.00
Зарегистрирован 28.03.2017 16:34
В портфолио нет работ
carepodamer77
[carepodamer77] рейтинг: 0.00
Зарегистрирован 28.03.2017 16:13
В портфолио нет работ
bellalema
[bellalema] рейтинг: 0.00
Зарегистрирован 28.03.2017 15:25
В портфолио нет работ
rurecodawep68
[rurecodawep68] рейтинг: 0.00
Зарегистрирован 28.03.2017 14:59
В портфолио нет работ

интересное  |  новости

обратная связь
Замечания или пожелания по работе сайта?
Улучшим его персонально для Вас!
Либо пишите на
Пользователей: 62109 | Проектов: 26602

Статьи / Полезные приемы CSS: text-overflow ellipsis

Полезные приемы CSS: text-overflow ellipsis
многие из нас уже вовсю пользуются нововведениями CSS3, но не всегда все проходит гладко.

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

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

при использовании этого свойства часто возникают две типовые проблемы:

1) в ячейках таблицы по умолчанию text-overflow: elliipsis не работает. наиболее корректным решением будет добавление свойства table-layout: fixed; в стиль таблицы (не ячейки), вот пример:

<style type="text/css">
table {
table-layout: fixed;
}

table td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 200px;
}
</style>


2) атрибут text-overflow: elliipsis попросту не работает. для корректной работы нужно соблюсти 3 условия:

  • ширина элемента должна быть жестко указана

  • overflow должен быть установлен в hidden

  • свойство white-space должно быть установлено в nowrap


Категория: Верстка
( Комментировать )
usesa
05:47 18.09.2014
[ рейтинг: 22.15 ] [ В портфолио 6 работ ]
Да, я про эклипс читал ещё на хабаре года два-три назад, что он не корректно работает. Но можно размер текста контролировать абсолютно любым скриптом, так что я вообще не понимаю, зачем люди пытаются его использовать.
dimaninc
VIP аккаунт
11:25 18.09.2014
[ рейтинг: 1001.69 ] [ В портфолио 69 работ ]
ну не знаю, по-моему он вполне корректно работает сейчас
главное выполнить все условия, когда его применяешь (white-space, overflow и т.д.)

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

...