Css примусовий перенос слів. Перенесення довгих слів за допомогою CSS

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

дефіс

Перше рішення для перенесення довгих слів - за допомогою дефіса.

Defisi (-webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto;)

Підтримка браузерами: CSS-дефіси підтримуються багатьма сучасними браузерами, за винятком Chrome, Opera, Android. Також, дуже часто дефіс вставляється в місцях, помилкових з граматичної точки зору.

обрив слова

Обрив слова - це властивість CSS, яке вказує на те, чи слід розривати рядки всередині слів.

Obriv-slova (-ms-word-break: break-all; word-break: break-all; word-break: break-word;)

Підтримка браузерами: Обрив слів підтримується у всіх браузерах, за винятком Opera Mini і старих версій Opera.

обгортка переповнення

Наступне рішення - це використання Обгортки переповнення (overflow-wrap).

Obertka-perepolneniya (word-wrap: break-word; overflow-wrap: break-word;)

Підтримка браузерами: підтримується практично у всіх браузерах. Примітка: Деякі браузери вимагають використання «word-wrap» замість «overflow-wrap».

Три крапки

Ще один варіант - використання крапок.

Mnogotochiye (overflow: hidden; white-space: nowrap; text-overflow: ellipsis;)

Підтримка браузерами: підтримується всіма сучасними браузерами.

Це працює метод, але далеко не ідеальний.

Фінальне рішення:Використання Обгортки переповнення і дефіса.

Finalnoye-resheniye (overflow-wrap: break-word; word-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; -moz-hyphens: auto; hyphens: auto;)

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

Визначають як переносити довгі слова:

1. тільки там, де стоїть риска, пробіл або Enter (викл., нерозривний пробіл і нерозривний дефіс -). Між частинами одного слова пишеться дефіс (наприклад, червоно-жовтий), між словами - тире. "М'який дефіс" - проявляється тільки при необхідності перенесення. Якщо слово виходить за рамки батька, то або переносить його частина без рисочки. У математичних виразах використовується мінус (наприклад, 5 - 2). У номерах телефонів відображається цифрова чорта (наприклад, +7 800 000-00-00). І все це не є тією знайомою -, що є на клавіатурі.
2. після будь-якого символу.
3. згідно з правилами російської мови з автоматичним застосуванням дефіса.

overflow-wrap
word-wrap
word-break
line-break
hyphens

вже переосвідетельствовался наш тисячадевятьсотдевяностодевяті-кілограмовий корчеватель-бульдозер-навантажувач

У чому полягає відмінність одне властивості від іншого

За замовчуванням довгі слова не переносяться, якщо на те немає явних вказівок з допомогою дефіса, і починаються з нового рядка.

Для того, щоб ігнорувалися рисочки, відразу видимі оку, вносимо word-break: keep-all; .

Для того, щоб браузер не звертав уваги і на м'який дефіс, вставляємо hyphens: none; .

Якщо потрібно перенесення слів, то word-wrap: break-word; раджу застосовувати завжди, оскільки він розуміється всіма браузерами. Він відрізняється від word-break: break-all; , Яке є пріоритетним, тим, що слова, які не поміщаються в блок, починаються з нового рядка і враховується рекомендація м'якого дефіса.

При спільному використанні word-break: break-all; з hyphens: auto; , Останнім ігнорується. hyphens: auto; розставляє будь дефіси на свій розсуд. Але для того, щоб воно працювало, потрібно позначити свою мову, вказавши в div атрибут lang = "ru".

Чи не переносити слова на інший рядок

Скажімо, пункт меню або кнопка будуть недобре виглядати, якщо роз'їдуться на частини. Тому треба заборонити їх поділ. Для чого всі вищезгадані властивості слід поставити в режим "за замовчуванням" і додати. Натисніть на і подивіться на наш полігон.

Управляти перенесенням слів при hyphens: auto;

Тетрагідропіранілціклопентілтетрагідропірідопірідіно ші

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

Включаємо перенесення для слів, які не влазять

Припустимо, у мене є блок, шириною 100 пікселів і мені в нього потрібно написати якийсь текст. У тексті попадається слово « саморозпаковується«. Таким буває архів, наприклад) Але не суть. Слово дуже довге, воно просто не влізе в контейнер по ширині. Давайте його напишемо в такий вузький блок (100 пікселів). Що буде?

Як бачимо, бідне слово вилізло за межі контейнера, ну діватися йому нікуди, що поробиш. І це без відступів. Так ось, тут на допомогу приходить властивість word-wrap. Ось що потрібно задати блоку, щоб включити перенесення слів по буквах в ньому:

Word-wrap: break-word;

А для переконливості можна прописати ще й внутрішні відступи (padding). Отже, після застосування властивості бачимо, що занадто довгі слова будуть переноситися по буквах на інший рядок. Причому, навіть якщо другий рядки не вистачить для слова, то інша його частина перенесеться на третю і т.д.

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

В яких випадках використовувати word-wrap

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

Отже, в цій статті ми дізналися, як робити перенос слів в css. На цьому у мене сьогодні все. До зустрічі.

Всім привіт і приступимо. Припустимо у нас є наступний текст:

Уряд Об'єднаних Арабських Еміратів і адміністрація концентрують в цьому місті все найновіші технології, засновані на останніх досягненнях науки і техніки, намагаючись перетворити його місто майбутнього, немов зійшов з екрану якогось науково-фантастичного фільму. До цих технологій можна віднести роботів-поліцейських, автомобілі-роботи і транспортну систему Hyperloop, а в недалекому майбутньому в Дубаї почне функціонувати служба автоматичних літаючих таксі. І в рамках підготовки до цієї події електричний двомісний літальний апарат Volocopter з 18 роторами, який і буде використовуватися в якості таксі, здійснив перший політ в автоматичному режимі, пишуть ...

тут у нас вказано якийсь текст з яким ми зараз почнемо працювати.

І перша властивість яке ми з вами розглянемо називається word-break

word-break: normal | keep-all | break-all

Нас в основному цікавлять два значення даного властивості normal - дефолтний значення і break-all за допомогою якого ми встановлюємо що перенесення слів здійснюється посимвольний. Що стосується keep-all, то дане значення служить для перенесення слів на китайською, японською та корейською мовами.

P (word-break: break-all ;.)

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

На щастя є аналогічне властивість яке переносить тільки не влазять слова по символам. Називається воно overflow-wrap:

P (overflow-wrap: break-word;)

і після застосування значення break-word, весь наш текст переноситься за словами, а слова які не влазять в задану ширину переносяться посимвольний. Можна сказати завдання виконане! Крім значення break-word дане властивість приймає:

overflow-wrap: normal | break-word | inherit;

Тепер давайте перейдемо до більш просунутому властивості css для перенесення слів в тексті.

Розглянемо властивість white-space c допомогою якого ми можемо імітувати роботу тега pre не змінюючи сам текст на моношірний.

white-space: normal | nowrap | pre | pre-line | pre-wrap | inherit

По суті за допомогою даного властивості ми працює тільки з пробілами в тексті. Наприклад якщо ми застосуємо наступний стиль до нашого тексту:

White-space: nowrap;

всі переноси рядків у нас будуть проігноровані і наш текст відобразитися у вигляді одного рядка.

White-space: pre;

У разі значення pre всі перенесення рядків будуть аналогічні переносам в вихідному коді. Причому якщо текст не буде поміщатися в задану ширину, то він переноситься не буде. Якщо ми хочемо щоб він переносився, то нам потрібно вказати значення pre-line.

Якщо ж ми хочемо щоб у нас враховувалися не тільки переноси рядків вихідного коду, але і пропуски між словами, тоді потрібно вказати:

White-space: pre-wrap;

Ось в принципі і все що я хотів вам розповісти про перенесення слів засобами css. Сподіваюся дана стаття була для вас корисною і ви не раз ще скористаєтеся отриманими знаннями.

Ну а я ж з вами прощаюся. Бажаю успіхів і удачі! Поки що!

При верстці у веб-майстрів періодично виникає питання: як буде здійснюватися перенесення тексту? У більшості випадків браузер самостійно справляється з цим завданням. Але іноді цей процес доводиться брати під контроль, особливо оформляючи довгі слова і фрази, які при неправильному перенесенні втрачають сенс.

Властивість word-wrap

У HTML для поділу рядків існує спеціальний тег
. Але його занадто часте використання вважається серед розробників поганим тоном і часто свідчить про непрофесіоналізм. Як доказ, уявіть, що у вас є логотип і ви хочете, щоб кожна буква починалася з нового рядка:

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

Перше властивість, до якого варто звернутися для обробки тексту, - це word-wrap. Приймає три значення: normal, break-all і keep-all. Вам для роботи знадобиться запам'ятати лише break-all. Normal стоїть за умовчанням, і його немає сенсу вказувати. Keep-all означає в документі CSS заборона розриву рядків. Розроблено спеціально для китайських, японських і корейських ієрогліфів. Тому, якщо ви не збираєтеся вести блог на якомусь із цих мов, властивість вам не знадобиться. А також воно не підтримується браузером Safari і мобільними телефонами на базі iOS.

Щоб логотипу з попереднього прикладу призначити за допомогою CSS перенесення на новий рядок кожної букви, потрібно прописати наступний код:

P (font: bold 30px Helvetica, sans-serif; width: 25px; word-wrap: break-all;)

Ширина і розмір шрифту підбирається таким чином, щоб місця вистачало тільки для однієї літери. Word-wrap зі значенням break-all повідомляє браузеру, що слово потрібно кожен раз переносити на новий рядок. Незамінним це властивість назвати не можна. Але воно стане в нагоді при оформленні невеликих блоків з текстом, наприклад полів для введення коментарів.

Властивість white-space

Поширена помилка початківців веб-розробників - намагатися редагувати текст пробілами або натисканнями клавіші Enter, а потім дивуватися, чому їх зусилля не видно на сторінці. Скільки б ви раз ні натиснули "Введення", браузер це проігнорує. Але є спосіб змусити його відображати текст так, як потрібно вам, і беручи до уваги всі інтервали.

У документі CSS перенесення рядка, призначений за допомогою властивості white-space, можна налаштувати так, щоб він здійснювався з урахуванням пробілів або натискання клавіші "Введення". White-space із значенням pre-line змусить браузер бачити в тексті Enter.

Якщо поміняти pre-line на pre-wrap в коді CSS, перенесення рядка відбудеться з урахуванням пробілів. І навпаки, заборонити будь-яке перенесення, присвоївши тексту властивість white-space із значенням nowrap:

#wrapper p (color: #FFF; padding: 10px; font: bold 16px Helvetica, sans-serif; white-space: nowrap;)

Text-overflow

Ще один корисний інструмент для роботи з текстом - це text-overflow. Крім розриву рядків, CSS-властивість дозволяє обрізати контент, коли контейнер переповнений. Приймає два значення:

• clip - просто обрізає текст;
• ellipsis - додає три крапки.

#wrapper p (color: #FFF; padding: 10px; font: bold 16px Helvetica, sans-serif; text-overflow: ellipsis; / * Додаємо три крапки * / white-space: nowrap; / * Забороняємо перенесення рядків * / overflow: hidden; / * Ховаємо все що виходить за рамки контейнера * /)

Щоб властивість працювало, елементу також необхідно призначити заборона на перенесення рядка і overflow із значенням hidden.