Как сделать так, чтобы абзац не отображался в одной строке

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

p {
    width: 300px;
    white-space: normal;
}

У вас есть несвязанная строка, для того, чтобы ее сломать, вам придется назначить некоторую фиксированную width вашему абзацу и использовать свойство word-wrap со значением break-word

демонстрация

Существуют разные способы достижения этого.

Вы можете использовать некоторые <br> теги, но, глядя на свой код, я не думаю, что это может быть полезно.

Вот почему я предлагаю вам лучше форматировать текст. Вы можете создать свой <div> и ваш <p> чтобы получить красивый текст. Прежде всего, установите max-width для вашего div: таким образом, если пользователь сжимает окно или имеет очень низкое разрешение, ваш макет сохраняется.

.catDescription {
    max-width: 1024px; /*Width example, you can ofc change it*/
}

Если у вас есть стены текста, свойство line-height может помочь вам не слишком сильно затянуть текст. Например:

.catDescription p {
    line-height:130%;
}

Используйте разрывы строк: <br>. Вставьте туда, где вы хотите, чтобы появилась новая строка.