Три крапки в кінці рядка засобами css, властивість text-overflow ellipsis

Три крапки в кінці рядка засобами css, властивість text-overflow ellipsis

Як же часом дратують довгі назви посилань товарів, - за три рядки, - або довгих заголовків інших блоків. Як було б здорово, якби можна було все це справа якось пріужать, зробити компактніше. А при наведенні мишкою вже показувати title повністю.

Для цього нам на допомогу прийде наш улюблений CSS. Все дуже просто, дивіться.

Припустимо, у нас є ось такий блок з каталогу з товарами:

Чудо-юдо сілопрідаватель вечірній, таємничий, арт. 20255-59

Чудовий товар по супер-ціні, всього за 100 руб. Скрасить ваші самотні вечори і дасть приплив життєвих сил!

Ось його структура:

Погодьтеся, виглядає жахливо. Звичайно, можна скоротити назву товару. Але що робити, якщо таких сотні або тисячі? Можна також засобами php обрізати частину назви, обмежившись якоюсь кількістю символів. Але що робити, якщо потім зміниться верстка і блоки будуть менше або навпаки рази в 2-3 більше? Все це не варіант, все це нам не підходить.

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

Отже, відсунувши в бік ручне редагування назв товарів і програмну обрізку стилів, ми беремо в руки CSS і дивимося, що у нас вийде:

Чудо-юдо сілопрідаватель вечірній, таємничий, арт. 20255-59

Чудовий товар по супер-ціні, всього за 100 руб. Скрасить ваші самотні вечори і дасть приплив життєвих сил!

Ну як, краще? По-моєму дуже навіть! А піднесіть мишку до назви. вуаля! Ось воно нам показується повністю.

У структурі у нас нічого не змінилося, я лише додав диву з класом .header тег title. А ось нові, доповнені стилі:

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

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

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