1. властивості
2. word-wrap / overflow-wrap
3. word-break
4. hyphens
5. white-space
6. Рядки коду в блоці
7. Три крапки зі змістом
8. Перенесення тільки в строго визначеному місці
9. Занадто довгі посилання
10. Висновок (Ха!)

Переклад статті Word Wrapping Woes з сайту jonibologna.com , Опубліковано на css-live.ru з дозволу автора - Джоні Трайтел .

Чомусь мені якось особливо «щастить» на дивні, несподівані фокуси з перенесенням тексту.

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

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

/ me б'ється об стіл

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

властивості

Зрештою при вирішенні проблем з перенесенням тексту залишається якийсь типовий «список підозрюваних». Одні досить очевидні і логічні, а інші - ні. Одні роблять свою справу самі по собі, а інші не дуже.

Отже, давайте поглянемо.

word-wrap / overflow-wrap

Властивість word-wrap приймає у вигляді значень два ключових слова: normal (за замовчуванням) і break-word. Це на додаток до трьох глобальних значень inherit, initial і unset.

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

У першому прикладі цього демо можна наочно побачити поведінку за замовчуванням:

Другий приклад на цьому демо включає оголошення overflow-wrap: break-word ;, наказує браузеру розбити слово перед можливим переповненням свого контейнера.

Важливо зауважити: в поточному чернетці специфікації CSS3 Text word-wrap було замінено на overflow-wrap, але значення залишилися колишніми. І погляньте на поточну підтримку браузерами цієї зміни .

word-break

Наскільки я зрозуміла, властивість word-break потрібно тільки для того, щоб якось по-особливому форматувати текст на китайською, японською та корейською мовами.

Я застосовувала word-break для розбивки довгих слів, але правильним властивістю (якщо ви не працюєте з далекосхідним текстом) буде більш загальне вищезазначене overflow-wrap.

hyphens

Властивість hyphens розповідає браузеру, як розставляти дефіс при перенесенні, і допускає такі значення: none, manual і auto, які в даний момент погано підтримуються браузерами , Тому вам, мабуть, доведеться запустити FireFox.

Значення none гарантує, що в слова ніколи не буде підставлятися символ перенесення.

При значенні manual дефіс виставляється в місці перенесення тільки при наявності вказує на це символу. Вказати це можна, вставивши символ або жорсткого, або м'якого переносу в потрібне місце в розмітці.

Жорсткий перенесення (& # 45;) накаже слову розірватися в певному місці при необхідності, але все в будь-якому випадку буде відображатися на екрані.

М'який перенос (& shy;) робить те ж саме, але фактично не відображає дефіс на екрані, що, як правило, краще.

При значенні auto слова можна розбивати або в явно зазначених місцях, або автоматично, відповідно до правил розстановки переносів для конкретної мови, зазначеними в спеціальних файлах (якщо вони передбачені в браузері). Розстановка переносів специфічна для мови, і для документа потрібно визначати атрибут lang.

white-space

У кожного з нас є улюблені CSS-властивості, на які можна покластися, немов на запасний вихід з написом «При аварії розбити скло молотком», щоб вибратися із заплутаної ситуації; см. також overflow: hidden і display: none. Для мене такою властивістю є white-space.

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

У цієї властивості буває п'ять значень: normal (за замовчуванням), nowrap, pre, pre-wrap і pre-line.

Поглянути на ці властивості в дії можна в прикладі нижче: враховуйте додаткові пробільні символи в розмітці.

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

nowrap (приклад 2) також ігнорує додаткові пробіли, але зате не розбиває рядок тексту на кордонах контейнера.

pre враховує всі пробільні символи в розмітці, і не розбиває рядки (як видно вище в прикладі 3).

pre-wrap (приклад 4) враховує додаткові пробіли, але змушує рядок розбиватися.

pre-line (останній п'ятий приклад) схлопивается пробільні символи (крім перекладу рядки) і примушує «ланцюжок» тексту уміщатися в контейнер.

На CSS - Tricks є зручна табличка , Яка допоможе все це резюмувати.

Рядки коду в блоці

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

З мого досвіду, зазвичай рішення залежить від того, якою мовою цей код, і взагалі від завдання, але ці проблеми можна обійти за допомогою примусових переносів (без дефіса!) Або горизонтального скролінгу. Методом проб і помилок можна зрозуміти, яке точне поєднання властивостей потрібно тому чи іншому браузеру. Переконайтеся, що значення white-space, бува, не перевизначити на одне з тих, при яких прогалини схлопиваются, тому що це може виявитися значущим для синтаксису коду.

Також я нарвалася на проблеми з адаптивністю при оформленні коду для github ( gist ), Який особливо підступний через те, що це table. У таких випадках я розумію, що мені доведеться застосувати особливе оформлення для перевизначення контейнера таблиці.

Три крапки зі змістом

Як на мене, CSS-оголошення text-overflow: ellipsis; - якась капелюх. Воно дуже примхлива і працює тільки при поєднанні з групою інших властивостей. До того ж воно застосовується тільки до єдиному рядку тексту, що робить його не особливо корисним.

З jQuery-плагіном dotdotdot можна розставити крапки в декількох рядках тексту і навіть додати в кінці посилання для продовження читання.

Ось швидкий прімерчік:

Перенесення тільки в строго визначеному місці

Часом необхідно, щоб слова розривалися тільки в суворо визначених місцях, де в цьому є сенс, що додає ще один рівень складності; як же повідомити ці точки розриву браузеру?

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

Не сумнівайтеся, що якщо м'який дефіс підтримується в браузері, то при необхідності рядок буде розриватися в тих місцях, де встановлено & shy ;.

Гей, чим ти займався на ви & shy; Ходна? Я малював по кераміці, це виглядало натурально.

Занадто довгі посилання

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

За замовчуванням такі посилання не розриваються і викликають всілякі неприємності на невеликих екранах. При необхідності URL'и повинні розриватися без дефіса, оскільки посилання в такому випадку буде неробочий. Також тут потрібно бути обережним, оскільки, якщо ви таке допустите, то розірвуться не тільки URL'и, але і всі слова.

overflow-wrap: break-word; на засланні гарантує, що URL розірветься в межах контейнера і переповнення не буде, хоча домогтися кросбраузерності тут не так просто , Як можна було б подумати.

Висновок (Ха!)

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

PS Це теж може бути цікаво: