Как сделать безусловный перенос каждого слова на новую строку?

Question

[Егор Огурцов]

Как сделать безусловный перенос каждого слова на новую строку тегом <br>?
Пробовал через word-wrap: width: xxpx, но тогда блок не центрируется.

Можно использовать php/js

Пример: https://jsfiddle.net/akr0s0w0/

Должно выглядеть так:
Два
слова

Вне зависимости от длины слова. И слова должны центрироваться в блоке.

Comments

[Шухратджон Джумаев]

приведите ваш код. Так будет проще понять в чем проблема

[Егор Огурцов]

Шухратджон Джумаев: у меня, по сути, нет кода, у меня есть <?php echo $category->name?>, все имена из двух слов, каждое из которых нужно писать с новой строки.

[Егор Огурцов]

Шухратджон Джумаев: а чтобы без проблем потом задать стили - нужно разбить слова тегом BR

[DireX]

дайте сюда пожалуйста
var_dump($category->name);

[Егор Огурцов]

там два слова. Например - "красный круг" или "теплый хлеб". Ща добавлю пример в вопрос

Answer 1

[FMars]

Средствами CSS: https://jsfiddle.net/akr0s0w0/1/

Answer 2

[Шухратджон Джумаев]

Попробуйте это:
$str = str_replace(' ', '<br>', $category->name);

Comments

[Шухратджон Джумаев]

вместо пробелов ставится тег br так что все слова разделяется тегом BR

[Егор Огурцов]

Шухратджон Джумаев: спасибо!

Answer 3

[kryamk]

width: min-content

Answer 4

[run182]

Обернуть каждое слово в span и добавить родителю display:flex;flex-direction:column

Comments

[Александр Бабич]

Если контент будет тянуться с БД, то не очень удобно будет. Для статики да, возможен такой вариант

Answer 5

[Александр Бабич]

p {
	display: table-caption;
}

Answer 6

[Сергей Печенов]

Чтобы решить задачу и вывести все слова в тексте с новой строки, можно просто сделать гигантское расстояние между словами:

p {
word-spacing: 9999px;
}