Обрізаємо довгу стро...

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

Незважаючи на те, що монітори великих діагоналей стають все доступнішими, а їх роздільна здатність постійно зростає, іноді виникає завдання у обмеженому просторі помістити багато тексту. Наприклад, це може знадобитися для мобільної версії сайту або для інтерфейсу, де важливо кількість рядків. У подібних випадках має сенс обрізати довгі рядки тексту, залишаючи лише початок речення. Так ми зробимо інтерфейс компактним і скоротимо обсяг виведеної інформації. Саме обрізання рядків можна робити на стороні сервера за допомогою PHP, але через CSS це простіше, до того ж завжди можна показати текст цілком, наприклад, при наведенні на нього курсора миші. Далі розглянемо методи, як текст порізати уявними ножицями.

Насправді все зводиться до використання властивості overflow зі значенням hidden. Відмінності лише полягають у різному відображенні нашого тексту.

Використовуємо overflow

Щоб властивість overflow проявила себе з текстом у всій красі, треба скасувати перенос тексту за допомогою white-space зі значенням nowrap. Якщо цього не зробити, то потрібного нам ефекту не буде, у тексті додадуться переноси і він буде відображатися весь цілком. У прикладі 1 показано, як обрізати довгий текст вказаним набором стилевих властивостей.

Приклад 1. overflow для тексту

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Текст</title>
  <style>
   .size {
    white-space: nowrap; /* Скасовуємо перенос тексту */
    overflow: hidden; /* Обрізаємо вміст */
    background: #fc0; /* Колір фону */
    padding: 5px; /* Поля */
   }
  </style>
 </head>
 <body>
  <p class="size">Внутрідискретне арпеджіо трансформує поліряд, 
  це і є одномоментна вертикаль в сверхбагатоголосній 
  поліфонічній тканині.</p>
 </body>
</html>

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

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

Добавляємо градієнт до тексту

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

У прикладі 2 показано створення цього ефекту. Стиль самого елемента практично залишиться прежнім, сам градієнт будемо додавати за допомогою псевдоелемента ::after та CSS3. Для цього вставляємо пустий псевдоелемент через властивість content та до нього застосовуємо градієнт з різними префіксами для основних браузерів (приклад 2). Ширину градієнту легко змінювати через width, також можна регулювати ступінь прозорості, замінивши значення 0.2 на своє.

Приклад 2. Градієнт поверх тексту

HTML5CSS3IE 8IE 9+CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Текст</title>
  <style>
   .size {
    white-space: nowrap; /* Скасовуємо перенос тексту */
    overflow: hidden; /* Обрізаємо вміст */
    padding: 5px; /* Поля */
    background: #fc0; /* Колір фону */
    position: relative; /* Відносне позиціонування */
   }
   .size::after {
    content: ''; /* Виводимо елемент */
    position: absolute; /* Абсолютне позиціонування */
    right: 0; top: 0; /* Положення елемента */
    width: 40px; /* Ширина градієнту*/
    height: 100%; /* Висота батька */
    /* Градієнт */
    background: -moz-linear-gradient(left, rgba(255,204,0, 0.2), #fc0 100%);
    background: -webkit-linear-gradient(left, rgba(255,204,0, 0.2), #fc0 100%);
    background: -o-linear-gradient(left, rgba(255,204,0, 0.2), #fc0 100%);
    background: -ms-linear-gradient(left, rgba(255,204,0, 0.2), #fc0 100%);
    background: linear-gradient(to right, rgba(255,204,0, 0.2), #fc0 100%);
   }
  </style>
 </head>
 <body>
  <p class="size">Внутрідискретне арпеджіо трансформує поліряд, 
  це і є одномоментна вертикаль в сверхбагатоголосній 
  поліфонічній тканині.</p>
 </body>
</html>

Цей метод не працює в браузері Internet Explorer до версії 8.0 включно, тому що в ньому немає підтримки градієнтів. Але можна відмовитися від CSS3 і зробити градієнт по-старому, через зображення у форматі PNG-24.

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

Многоточіє в кінці тексту

Замість градієнта в кінці обрізаного тексту також можна використовувати многоточіє. При цьому воно буде додаватися автоматично за допомогою властивості text-overflow. Його розуміють всі браузери, включаючи старі версії IE, і єдиним недоліком цієї властивості є поки що його неясний статус. У CSS3 вроді ця властивість входить, але код з ним не проходить валідацію.

У прикладі 3 показано застосування властивості text-overflow зі значенням ellipsis, яке додає многоточіє. При наведенні курсора миші на текст, він відображається цілком і підсвічується фоновим кольором.

Приклад 3. Використання text-overflow

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Текст</title>
  <style>
   .size {
    white-space: nowrap; /* Скасовуємо перенос тексту */
    overflow: hidden; /* Обрізаємо вміст */
    padding: 5px; /* Поля */
    text-overflow: ellipsis; /* Многоточіє */
   }
   .size:hover {
    background: #f0f0f0; /* Колір фону */
    white-space: normal; /* Звичайний перенос тексту */
   }
  </style>
 </head>
 <body>
   <div class="size">Безсвідоме викликає контраст, це позначено 
   Лі Россом як фундаментальна помилка атрибуції, яка 
   простежується в багатьох експериментах.</div>
 </body>
</html>

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

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

текст

Часті запитання