Как сделать разрыв строки по пробелам в тексте, а не посреди слова?

Question

[Remmi]

Добрый день.

Есть параграф с текстом, к нему применены стили:

.message {
  word-break: break-all;
  word-wrap: break-word;
}

При таком описании текст может порваться посреди слова, если оно не помещается в строку. Например: сл-ово.

Хотелось бы более элегантное решение для разрыва длинных строк - чтобы оно делалось по пробелам или по гласным, если пробела в строке не было вовсе.

Возможно ли на чистом CSS? Или не обойтись без программирования логики на фронт-энде/бэк-энде?

Answer 1

[Alexander]

jsfiddle.net/5pu3wd97/1
htmlbook.ru/css/word-break
htmlbook.ru/css/word-wrap
htmlbook.ru/css/white-space

Comments

[Remmi]

C white-space: pre-wrap ; подошло идеально.

[Remmi]

Хотя в этом варианте приходится убирать все жёсткие переносы br

[Remmi]

Подошёл вариант с единственным свойством - word-wrap: break-word;

Answer 2

[Арсений Тогулев]

.message {
white-space:  pre-wrap ;
}

В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесен на следующую строку.
htmlbook.ru/css/white-space