Text-overflow в Firefox і все, все, все. Text-overflow в Firefox і все, все, все Overflow hidden крапки

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

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

Варіант для однострочного тексту на CSS

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

Block (width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;)

Варіант для багаторядкового тексту на CSS

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

А тепер і самі властивості

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:

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;)

Варіант для багаторядкового тексту на JavaScript

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

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 пікселів. Ми також хочемо повідомити користувачеві про це. Щоб він мав на увазі, що відображається не все назву. І ми хочемо, щоб при наведенні мишки, відображався весь текст.

Давайте поглянемо як ми можемо це зробити з допомогою 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 сьогодні і Ви не пошкодуєте!

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

Терпи з гідністю те, що змінити не можеш.

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

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

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

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

От і все. Перевіряємо і переконуємося що в 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: "...";) */

Правити, як виявилося, не багато. У стиль основного блоку додалося три рядки. Дві з них включають text-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 для основного блоку (найпростіший варіант). Якщо прибрати (видалити, закомментировать) правіло.ellipsis * ілі.moz-ellipsis> DIV + DIV (яке взагалі ніяк не стосується IE7), то глюк пропадає. Дивно все це, якщо хто знає в чому справа, дайте знати. Поки ж обійдемося zoom: 1 і перейдемо до Firefox.
Властивість -moz-binding підключає файл moz_fix.xml інструкцію з ідентифікатором ellipsis. Вміст цього xml файлу наступне:

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

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

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

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

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 (перше що підвернулася), і застосував для нього описаний вище метод.
взагалі ж дане рішенняможна назвати універсальним лише з натяжкою. Все залежить від вашої верстки та її складності. Можливо, знадобиться напилок, а може і бубон. Хоча в більшості випадків, я думаю, працювати буде. І потім, у вас тепер є відправна точка;)
Сподіваюся, ви почерпнули зі статті щось цікаве і корисне;) Вчіться, експериментуйте, діліться.
Успіхів!

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

коротка інформація

позначення

	опис	приклад
<тип>	Вказує тип значення.	<размер>
A && B	Значення повинні виводитися в зазначеному порядку.	<размер> && <цвет>
A | B	Вказує, що треба вибрати тільки одне значення із запропонованих (A або B).	normal | small-caps
A || B	Кожне значення може використовуватися самостійно або спільно з іншими в довільному порядку.	width || count
	Групує значення.	[Crop || cross]
*	Повторювати нуль або більше разів.	[,<время>]*
+	Повторювати один або більше разів.	<число>+
?	Зазначений тип, слово або група не є обов'язковим.	inset?
(A, B)	Повторювати не менше A, але не більше B раз.	<радиус>{1,4}
#	Повторювати один або більше разів через кому.	<время>#

×

значення

clip Текст обрізається за розміром області. ellipsis Текст обрізається і до кінця рядка додається три крапки.

приклад

Магнітне поле мізерно гасить велике коло небесної сфери, в такому випадку ексцентриситети і нахили орбіт зростають.

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

Мал. 1. Три крапки в кінці тексту

об'єктна модель

об'єкт.style.textOverflow

Примітка

Opera до версії 11 використовує властивість -o-text-overflow.

Специфікація

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

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

×