JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block">
    <div class="message">
        <p>Приакомописаниитекстможетпорватьсяпосредислова,если оно не помещается в строку. Например: сл-ово.

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

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

CSS

.message {
  /* word-break: break-all; */
  word-wrap: break-word;
  white-space: pre-line;
}

.block {
    width: 200px;
    border: 2px black solid;
}