Свойство hyphens включает переносы слов в браузере с помощью знака переноса '-'.

Внимание! Для поддержки русского языка необходимо добавить атрибут lang="ru" к тегу, к которому применяются переносы (или к родителю этого тега). Можно просто добавить этот атрибут к тегу html. Без этого переносы работать не будут!

В настоящее время свойство работает только с приставками -ms, moz- и -webkit (причем только Safari, Androis и iOS, но не Chrome и не Опера!).

См. также word-break, word-wrap, overflow-wrap, а также символы мягкого переноса wbr и ­ и тег br.

Кроме того, вам могут пригодиться CSS свойства overflow, white-space, text-overflow.

Синтаксис

селектор {
	hyphens: auto | manual | none;
}

Значения

Значение Описание
auto Расставляет знаки переноса там, где это необходимо.
manual Добавляет переносы только в тех местах, где добавлен тег wbr или спецсимвол ­ и только при необходимости. Такие переносы называются мягкими.
none Отменяет расстановку переносов (слова не будут переносится, даже если есть мягкие переносы).

Значение по умолчанию: manual.

Примеры

Примеры следует смотреть в тех браузерах, которые поддерживают переносы.

Значение auto

<p lang="ru">
	текст...
</p>
p {
	width: 400px; 
	-ms-hyphens: auto; 
	-moz-hyphens: auto; 
	-webkit-hyphens: auto; 
	hyphens: auto; 
	border: 1px solid red; 
	text-align: justify;
}

Результат выполнения кода:

Все гости совершали обряд приветствования никому неизвестной, никому неинтересной и ненужной тетушки. Анна Павловна с грустным, торжественным участием следила за их приветствиями, молчаливо одобряя их. Ma tante каждому говорила в одних и тех же выражениях о его здоровье, о своем здоровье и о здоровье ее величества, которое нынче было, слава Богу, лучше. Все подходившие, из приличия не выказывая поспешности, с чувством облегчения исполненной тяжелой обязанности отходили от старушки, чтобы уж весь вечер ни разу не подойти к ней.

Сравните с текстом, где переносы выключены: появляются большие промежутки между словами, что выглядит очень некрасиво (из-за text-align: justify).

<p lang="ru">
	текст...
</p>
p {
	width: 400px;
	-ms-hyphens: none;
	-moz-hyphens: none;
	-webkit-hyphens: none;
	hyphens: none;
	border: 1px solid red;
	text-align: justify;
}

Результат выполнения кода:

Все гости совершали обряд приветствования никому неизвестной, никому неинтересной и ненужной тетушки. Анна Павловна с грустным, торжественным участием следила за их приветствиями, молчаливо одобряя их. Ma tante каждому говорила в одних и тех же выражениях о его здоровье, о своем здоровье и о здоровье ее величества, которое нынче было, слава Богу, лучше. Все подходившие, из приличия не выказывая поспешности, с чувством облегчения исполненной тяжелой обязанности отходили от старушки, чтобы уж весь вечер ни разу не подойти к ней.