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

Первый абзац без переноса слов, второй — с переносом слов.

Перенос слов в абзацах использовался в печати очень давно, а свойство переноса в CSS3 появилось сравнительно недавно, и до сих пор оно мало поддержано браузерами.

Сейчас оно поддерживается браузерами Firefox от 6 версии с приставкой производителя и от 43 версии без приставки производителя, и следующими браузерами с приставками производителей: Internet Explorer 10 и 11 версий, Edge всех версий, Safari от версии 5,1. Удивительно, но свойство переноса слов до сих пор не поддержано в браузерах Chrome и на движке Webkit.

Демонстрация работы

Использование свойства переноса слов

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

p {
  text-align: justify;
  -webkit-hyphens: auto;
    -moz-hyphens: auto;
  hyphens: auto;
}

Код CSS выше даст следующий результат:

При использовании значения вручную нам как создателям текста нужно вручную задать, каким образом должны переносится слова, с помощью добавления записи ­ (мягкий перенос) внутри слов.

HTML

<p>Lorem ipsum dolor sit amet, consect¬etur adipisic¬ing elit, sed do eius¬mod tempor incididunt ut labore et dolore magna ali-qua [...]</p>

CSS

p {
text-align: justify;
-webkit-hyphens: manual;
-moz-hyphens: manual;
hyphens: manual;
}

В зависимости от длинны абзаца, можно получить разные результаты

Первый абзац без переноса слов, второй — с переносом слов.

Заключение

Когда это свойство будет поддерживаться всеми браузерами, абзацы на веб-страницах будут выглядеть лучше. А до тех пор можно использовать библиотеку JavaScript Hyphenator, которая обладает хорошей совместимостью и работает со многими языками.

Демонстрация работы – Скачать исходный код

Автор урока Thoriq Firdaus

Перевод — Дежурка

Смотрите также:

• Создание классических типографских эффектов: первая висячая строка абзаца
• Создание тени текста CSS
• Использование горизонтального разделителя