Css крапка в кінці. Обрізка одно-, або багаторядкового тексту по висоті з додаванням крапки. Властивість text-overflow: ellipsis корисна коли
Як часом подразнюють довгі назви посилань товарів, - по три рядки, - чи довгих заголовків інших блоків. Як було б чудово, якби можна було всю цю справу якось примушувати, зробити компактніше. А при наведенні мишкою вже показувати title повністю.
Для цього нам допоможе прийде наш улюблений CSS. Все дуже просто, дивіться.
Припустимо, у нас є такий блок з каталогу з товарами:
Ось його структура:
Чудовий товар за супер ціною, всього за 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, і сайтобудування не здасться вам такою складною річчю =)
Багато хто напевно стикався з проблемою, коли якийсь текст потрібно виводити в один рядок. При цьому текст може бути дуже довгим, а ширина блоку, в якому цей текст знаходиться зазвичай обмежена, хоча б тим же розміром вікна браузера. На ці випадки придумана властивість text-overflow, яка внесена в рекомендацію CSS3, а вперше була реалізована в IE6, дуже давно. У разі використання цієї властивості для блоку, якщо його текст більший за шириною ніж сам блок, то текст обрізається і в кінці ставиться крапка. Хоча тут не все так просто, але повернемося до цього трохи згодом.
З Internet Explorer все зрозуміло, що ж щодо інших браузерів? І хоча в теперішній моментзі специфікації CSS3 властивість text-overflow виключено, Safari його підтримує (принаймні у 3-й версії), Opera теж (з 9-ї версії, щоправда називається властивість -o-overflow-text). А Firefox – ні, не підтримує, і навіть у 3-й версії не буде. Сумно, але факт. Але, може, можна щось зробити?
Зробити, звісно, можна. Коли шукав в інтернеті з приводу цієї властивості, і як із цим у Firefox, натрапив на с простим рішенням. Суть рішення:
От і все. Деталі читайте у статті.
Рішення не погане, але є проблеми:
- Текст може обрізатися посередині (умовно кажучи) літери, і побачимо її «обрубок».
- Багатокрапка відображається завжди, навіть коли текст менше ширини блоку (тобто не випадає з нього і крапка не потрібно).
Крок перший
Для початку зосередимося на другій проблемі, а саме, як уникнути відображення крапки коли це не потрібно. Поламавши голову і «трохи» поекспериментувавши, знайшов певне рішення. Спробую пояснити.
Суть у тому, що нам потрібен окремий блок з трьома крапками, який з'являтиметься лише тоді, коли текст займає занадто багато простору по ширині. Тут мені прийшла ідея про плаваючий блок. Хоч і звучить страшно, але тут, лише на увазі блок, який є завжди, і притиснутий вправо, але коли ширина тексту стає великою, текст виштовхує блок на наступну лінію.
Перейдемо до практики, інакше важко пояснити. Задамо 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 (перше, що підвернулося), і застосував для нього описаний вище метод.
Взагалі ж дане рішенняможна назвати універсальним лише з натяжкою. Все залежить від вашої верстки та її складності. Можливо, знадобиться напилок, а може й бубон. Хоча в більшості випадків, я думаю, працюватиме. І потім, у вас тепер є відправна точка;)
Сподіваюся, ви почерпнули зі статті щось цікаве та корисне;) Вчіться, експериментуйте, діліться.
Успіхів!
Використання CSS3 тягне за собою революційні зміни в щоденні будні веб-дизайнерів. CSS3 не перестає нас дивувати щодня. Речі, які раніше можна було зробити лише за допомогою JavaScript, тепер легко робляться з CSS3. Приміром, властивість Text-Overflow.
Іноді у процесі створення сайтів нам необхідно сховати частину динамічного тексту без переходу на наступний рядок. Тобто вставити довгий текст у таблицю із фіксованою шириною. У той самий час, необхідно показати користувачеві, що видима частина тексту - це ще все. Є ще й прихована частина. Подібне можна показати за допомогою трикрапки (...).
З CSS3 ми можемо легко це здійснити, використовуючи властивість CSS text-overflow
Розмітка
Text-overflow: ellipsis;
Значення ellipsisдозволяє після тексту додати трикрапку (...)
Властивість text-overflow: ellipsis корисна коли:
1. Текст виходить за межі осередку
2. У осередку є вільний простір: nowrap.
У нас є div з шириною 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, нам необхідно додати один рядок в таблицю стилів.
якщо захочете властивість відключити, просто додайте:
Moz-binding: url("bindings.xml#none");
Наступний крок - створення файлу bindings.xml у тому місці, де зберігається таблиця стилів. Ми можемо використовувати будь-який текстовий редактордля цього! Скопіюйте код нижче та назвіть файл bindings.xml.
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"
Остаточний код для всіх браузерів
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 працює в тому випадку, якщо для блоку значення властивості overflow встановлено як auto, scroll або hidden.
коротка інформація
Позначення
×
Опис приклад <тип> Вказує тип значення. <размер> A && B Значення мають виводитися у вказаному порядку. <размер> && <цвет> A | B Вказує, що треба вибрати лише одне значення із запропонованих (A або B). normal | small-caps A || B Кожне значення може використовуватись самостійно або спільно з іншими у довільному порядку. width || count Групує значення. [crop || cross] * Повторювати нуль або більше разів. [,<время>]* + Повторювати один чи більше разів. <число>+ ? Зазначений тип, слово чи група не є обов'язковим. inset? (A, B) Повторювати щонайменше A, але з більше разів. <радиус>{1,4} # Повторювати один або більше разів через кому. <время># Значення
clip Текст обрізається за розміром області. ellipsis Текст обрізається і до кінця рядка додається крапка.
приклад
text-overflow Магнітне поле мізерно гасить велике коло небесної сфери, у разі ексцентриситети і нахили орбіт зростають.
Результат цього прикладу показано на рис. 1.
Рис. 1. Багатокрапка в кінці тексту
Об'єктна модель
Об'єкт.style.textOverflow
Примітка
Opera до версії 11 використовує властивість -o-text-overflow.
Специфікація
Кожна специфікація проходить кілька стадій схвалення.
×
- Recommendation (Рекомендація) - специфікація схвалена W3C та рекомендована як стандарт.
- Candidate Recommendation ( Можлива рекомендація) - група, відповідальна за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників щодо реалізації стандарту.
- Proposed Recommendation ( Пропонована рекомендація) - на цьому етапі документ подано на розгляд Консультативної ради W3C для остаточного затвердження.
- Working Draft (Робочий проект) - більш зріла версія чернетки після обговорення та внесення поправок для розгляду спільнотою.
- Editor"s draft ( Редакторська чернетка) - Чорнова версія стандарту після внесення правок редакторами проекту.
- Draft ( Чернетка специфікації) – перша чорнова версія стандарту.
