Всім привіт). Я продовжую писати про різні корисні властивості мови css, які так чи інакше можуть допомогти при верстці. І сьогодні я хочу розповісти, як робити в css перенесення слів, якщо вони не влазять в свій контейнер. Я покажу вам все на реальному прикладі.
Включаємо перенесення для слів, які не влазять
Припустимо, у мене є блок, шириною 100 пікселів і мені в нього потрібно написати якийсь текст. У тексті попадається слово «саморозпаковується«. Таким буває архів, наприклад) Але не суть. Слово дуже довге, воно просто не влізе в контейнер по ширині. Давайте його напишемо в такий вузький блок (100 пікселів). Що буде?
Як бачимо, бідне слово вилізло за межі контейнера, ну діватися йому нікуди, що поробиш. І це без відступів. Так ось, тут на допомогу приходить властивість word-wrap. Ось що потрібно задати блоку, щоб включити перенесення слів по буквах в ньому:
А для переконливості можна прописати ще й внутрішні відступи (padding). Отже, після застосування властивості бачимо, що занадто довгі слова будуть переноситися по буквах на інший рядок. Причому, навіть якщо другий рядки не вистачить для слова, то інша його частина перенесеться на третю і т.д.
Хочу відзначити, що властивість можна без побоювань використовувати. По-перше, сьогодні воно відмінно працює в браузерах. По-друге, воно працює по розумному. А саме, для всіх нормальних слів ніяких переносів не буде, переноситися будуть слова цілком на наступну сходинку, тому читабельність не порушується. Ви можете побачити це на цьому скрині.
В яких випадках використовувати word-wrap
Власне, поки я бачу 2 варіанти використання. Перший - як раз для вузьких блоків, де ви побоюєтеся, що довгі слова можуть некрасиво вилізти за межі блоку. Другий - це коли дизайнер задумав так, щоб назва сайту було в кілька рядків.
Отже, в цій статті ми дізналися, як робити перенос слів в css. На цьому у мене сьогодні все. До зустрічі.
Вам також може бути цікаво
