Css overflow багатокрапка. Трикрапка в кінці рядка засобами CSS. Остаточний код для всіх браузерів

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

Іноді у процесі створення сайтів нам необхідно сховати частину динамічного тексту без переходу на наступний рядок. Тобто вставити довгий текст у таблицю із фіксованою шириною. У той самий час, необхідно показати користувачеві, що видима частина тексту - це ще все. Є ще й прихована частина. Подібне можна показати за допомогою трикрапки (...).

З CSS3 ми можемо це легко здійснити, використовуючи властивість CSS text-overflow

Розмітка

Text-overflow: ellipsis;

Значення ellipsisдозволяє після тексту додати трикрапку (...)

Властивість text-overflow: ellipsis корисна коли:

1. Текст виходить за межі осередку
2. У осередку є вільний простір: nowrap.

У нас є div з шириною 150 пікселів для відображення назви компаній з бази даних. Але при цьому ми не хочемо, щоб довгі назви компаній перескакували на новий рядок та псували зовнішній виглядтаблиці. Тобто нам необхідно сховати текст, який виходить за межі 150 пікселів. Ми також хочемо повідомити користувача про це. Щоб він мав на увазі, що відображається не вся назва. І ми хочемо, щоб при наведенні мишки відображався весь текст.

Давайте поглянемо як ми можемо це зробити з допомогою CSS 3.

Company-wrap ul li (
text-overflow: ellipsis;
overflow: hidden;
white-space:nowrap; )

Підтримка браузерів

За допомогою серед браузерів у даної властивостіє один маленький нюанс. Всі, крім 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, яка внесена в рекомендацію CSS3, а вперше була реалізована в IE6, дуже давно. У разі використання цієї властивості для блоку, якщо його текст більший за шириною ніж сам блок, то текст обрізається і в кінці ставиться крапка. Хоча тут не все так просто, але повернемося до цього трохи згодом.
З Internet Explorer"Ом все зрозуміло, що ж щодо інших браузерів? І хоча в теперішній моментзі специфікації CSS3 властивість text-overflow виключено, Safari його підтримує (принаймні у 3-й версії), Opera теж (з 9-ї версії, щоправда називається властивість -o-overflow-text). А Firefox – ні, не підтримує, і навіть у 3-й версії не буде. Сумно, але факт. Але, може, можна щось зробити?

Зробити, звісно, ​​можна. Коли шукав в інтернеті з приводу цієї властивості, і як із цим у Firefox, натрапив на с простим рішенням. Суть рішення:

От і все. Деталі читайте у статті.
Рішення не погане, але є проблеми:

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

Крок перший

Для початку зосередимося на другій проблемі, а саме, як уникнути відображення крапки коли це не потрібно. Поламавши голову і «трохи» поекспериментувавши, знайшов певне рішення. Спробую пояснити.
Суть у тому, що нам потрібен окремий блок з трьома крапками, який з'являтиметься лише тоді, коли текст займає занадто багато простору по ширині. Тут мені прийшла ідея про плаваючий блок. Хоч і звучить страшно, але тут, лише на увазі блок, який є завжди, і притиснутий вправо, але коли ширина тексту стає великою, текст виштовхує блок на наступну лінію.
Перейдемо до практики, інакше важко пояснити. Задамо HTML структуру:

very long text

Не дуже компактно, але меншого у мене не вийшло. Отже, ми маємо блок-контейнер DIV.ellipsis, блок з нашим текстом і ще один блок, який міститиме багатокрапку. Зауважимо, що «блок з трьома крапками» насправді порожній, адже нам не потрібні зайві три точки, коли ми копіюватимемо текст. Також не варто лякатися відсутності додаткових класів, оскільки дана структура добре адресується за допомогою CSS селекторів. А ось і сам CSS:

.ellipsis ( overflow: hidden; white-space: nowrap; line-height: 1.2em; height: 1.2em; border: 1px solid red; ) .ellipsis > DIV:first-child ( float: left; ) .ellipsis > DIV + DIV (float: right; margin-top: -1.2em;).

От і все. Перевіряємо і переконуємося, що в Firefox, Opera, Safari працює як і задумано. У IE дуже дивний, але передбачуваний результат. У IE6 все роз'їхалося, а в IE7 просто не працює, так як він не підтримує контент, що генерується. Але до IE ми ще повернемося.

Поки що ж розберемо зроблене. По-перше, ми задаємо 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 правила на наступний:

.ellipsis > DIV:first-child::after ( float: right; content: "..."; margin-top: -1.2em; background-color: white; position: relative; )

в Opera і Safari, все працює як раніше, і без додаткового блоку з трьома крапками. А ось Firefox розчаровує. Адже саме для нього ми робимо рішення. Що ж, доведеться обходитися початковою HTML структурою.

Крок другий

Як ви могли помітити, ми позбулися проблеми появи крапки, коли текст уміщається в блок. Однак у нас залишилася ще одна проблема – текст обрізається посередині букв. До того ж у IE це не працює. Щоб побороти те й інше, потрібно використовувати рідне правило text-overflow для браузерів, і тільки для Firefox використовувати описане вище рішення (альтернативи немає). Як зробити рішення "тільки для Firefox" розберемося пізніше, а зараз спробуємо змусити працювати те, що є з використанням text-overflow. Підправимо CSS:

.ellipsis ( overflow: hidden; white-space: nowrap; line-height: 1.2em; height: 1.2em; border: 1px solid red; text-overflow: ellipsis; -o-text-overflow: ellipsis; width: 100%; } . ellipsis * ( display: inline; ) / *.ellipsis > DIV:first-child ( float: left; ) .ellipsis > DIV + DIV ( float: right; margin-top: -1.2em; ) .ellipsis > DIV + DIV::after ( background-color: white; content: "..."; ) */

Правити, як виявилося, не багато. У стиль основного блоку додалося три рядки. Дві з них включають текстове overflow. Завдання ширини width: 100% потрібно для IE, щоб текст не розсовував блок до нескінченності, та властивість text-overflow спрацювала; власне, ми обмежили ширину. По ідеї DIV, як і всі блокові елементи, розтягується по всій ширині контейнера, і width: 100% ні до чого, і навіть шкідливо, але у IE проблема з layout, оскільки контейнер завжди розтягується за розмірами контенту, тому інакше не можна. Також ми зробили всі внутрішні елементи рядковими (inline), тому що для деяких браузерів (Safari & Opera) text-overflow інакше не спрацює, тому що всередині є блокові (block) елементи. Ми закоментували три останні правила, оскільки в даному випадкувони не потрібні і все ламають (конфліктують). Ці правила потрібні будуть лише для Firefox.
Подивимося, що в нас вийшло і продовжимо.

Крок третій

Коли я в черговий раз заглянув на сторінку (перед тим як збирався писати цю статтю), згадувану на самому початку, то заради інтересу переглянув коментарі, на предмет розумних суміжних ідей. І знайшов , у коментарі, де йшлося про інше рішення, яке працює у Firefox та IE (для цієї людини, як і для автора першої статті, інших браузерів, мабуть, не існує). Так ось, у цьому рішенні, автор дещо інакше бореться з даним явищем (відсутністю text-overflow), навішуючи обробники на події overflow та underflow елементам, для яких потрібно було ставити крапку при необхідності. Не погано, але мені здається це рішення дуже дороге (у плані ресурсів), тим більше, що воно у нього дещо підглючує. Однак, розбираючись, як він цього досяг, наткнувся на цікаву штуку, а саме CSS властивість-moz-binding. Наскільки я зрозумів, це аналог behaviour в IE, тільки під іншим соусом і крутіше. Але не заглиблюватимемося в деталі, скажімо тільки, що в такий спосіб можна повісити JavaScript обробник на елемент за допомогою CSS. Звучить дивно, але це працює. Що ми робимо:

.ellipsis ( overflow: hidden; white-space: nowrap; line-height: 1.2em; height: 1.2em; border: 1px solid red; text-overflow: ellipsis; -o-text-overflow: ellipsis; width: 100% ; -moz-binding: url(moz_fix.xml#ellipsis); zoom: 1;) .ellipsis * ( display: inline; ) .moz-ellipsis > DIV:first-child(float: left; display: block; } .moz-ellipsis > DIV + DIV(float: right; margin-top: -1.2em; display: block; } .moz-ellipsis > DIV + DIV::after( background-color: white; content: "..."; )

Як видно, ми знову внесли небагато змін. На цьому етапі в IE7 спостерігається дивний глюк, все перекошується, якщо не поставити zoom: 1 для основного блоку (найпростіший варіант). Якщо прибрати (видалити, закоментувати) правило. Дивно все це, якщо хтось знає в чому справа, дайте знати. Поки обійдемося zoom: 1 і перейдемо до Firefox.
Властивість -moz-binding включає файл moz_fix.xml інструкцію з ідентифікатором ellipsis. Вміст цього xml файлунаступне:

Все, що робить даний конструктор, це до елемента, для якого спрацював селектор, додає клас moz-ellipsis. Це буде працювати тільки у Firefox (gecko браузерах?), тому тільки в ньому до елементів буде додано клас moz-ellipsis, і ми можемо для цього класу дописати додаткові правила. Чого й домагалися. Не зовсім впевнений щодо необхідності this.style.mozBinding = "", але з досвіду з expression краще перестрахуватися (взагалі я слабо знайомий з цією стороною Firefox, тому можу помилятися).
Вас може насторожити, що в даному прийомі використовується зовнішній файл і JavaScript. Лякатися не варто. По-перше якщо файл не підвантажиться і/або JavaScript відключений і не спрацює, нічого страшного, користувач просто не побачить крапки в кінці, текст буде обрізатися після закінчення блоку. Тобто в даному випадку отримуємо «необтяжливе» рішення. Можете самі переконатися.

Таким чином, ми отримали стиль для браузерів «великої четвірки», який реалізує text-overflow для Opera, Safari & IE, а для Firefox його емулює, не дуже, але це краще ніж нічого.

Крок четвертий

На цьому місці можна було б поставити крапку, але хотілося б трохи покращити наше рішення. Якщо ми можемо повісити конструктор на будь-який блок і відповідно отримуємо над ним контроль, чому б не скористатися цим. Спростимо нашу структуру:

very long text

О так! Думаю, ви зі мною погодитеся - це те що треба!
Тепер приберемо зі стилю все зайве:

.ellipsis ( overflow: hidden; white-space: nowrap; line-height: 1.2em; height: 1.2em; text-overflow: ellipsis; -o-text-overflow: ellipsis; width: 100%; -moz-binding: url(moz_fix.xml#ellipsis); ) .moz-ellipsis > DIV:first-child ( float: left; ) .moz-ellipsis > DIV + DIV ( float: right; margin-top: -1.2em; ) .moz -ellipsis > DIV + DIV::after ( background-color: white; content: "..."; )

Ми нарешті прибрали червону рамку:)
А тепер трохи допишемо наш moz_fix.xml:

Що тут відбувається? Ми відтворюємо нашу початкову структуру HTML. Тобто ті складнощі з блоками робляться автоматично, і лише Firefox. JavaScript коднаписаний у найкращих традиціях:)
На жаль, ситуацію, коли текст обрізається посередині букви, ми уникнути не можемо (щоправда, можливо, тимчасово, тому що моє таке рішення поки що дуже сире, і в майбутньому може вийде). Але можемо трохи згладити цей ефект. Для цього нам знадобиться зображення (біле тло з прозорим градієнтом), і трохи змін у стиль:

.moz-ellipsis > DIV:first-child (float: left; margin-right: -26px;) .moz-ellipsis > DIV + DIV ( float: right; margin-top: -1.2em; background: url(ellipsis.png) repeat-y; padding-left: 26px; }

Дивимося і радіємо життю.

На цьому й поставимо крапку.

Висновок

Наведу невеликий приклад для сторонньої верстки. Я взяв зміст однієї зі сторінок Wikipedia (перше, що підвернулося), і застосував для нього описаний вище метод.
Взагалі ж дане рішенняможна назвати універсальним лише з натяжкою. Все залежить від вашої верстки та її складності. Можливо, знадобиться напилок, а може й бубон. Хоча в більшості випадків, я думаю, працюватиме. І потім, у вас тепер є відправна точка;)
Сподіваюся, ви почерпнули зі статті щось цікаве та корисне;) Вчіться, експериментуйте, діліться.
Успіхів!

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

Незважаючи на те, що монітори великих діагоналей стають все доступнішими, а їхня роздільна здатність постійно зростає, іноді виникає завдання в обмеженому просторі вмістити багато тексту. Наприклад, це може знадобитися для мобільної версіїсайту або для інтерфейсу, в якому важлива кількість рядків. У подібних випадках має сенс обрізати довгі рядкитексту, залишивши лише початок речення. Так ми приведемо інтерфейс до компактного вигляду і скоротимо обсяг інформації, що виводиться. Саме обрізання рядків можна робити за сервера за допомогою того ж 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. Текст з трьома крапками

Великим плюсом зазначених методів служить той момент, що градієнт і крапка не відображаються якщо текст короткий і повністю поміщається в задану область. Отже, текст буде виводитися як завжди, коли він цілком видно на екрані і обрізатиметься при зменшенні ширини елемента.

Як часом подразнюють довгі назви посилань товарів, - по три рядки, - чи довгих заголовків інших блоків. Як було б чудово, якби можна було всю цю справу якось примушувати, зробити компактніше. А при наведенні мишкою вже показувати 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: ;)

Погодьтеся, виглядає жахливо. Звісно, ​​можна скоротити назву товару. Але що робити, якщо таких сотні чи тисячі? Можна також засобами 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: overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

Дивіться, що ми зробили:

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

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