Как сделать перенос строки с помощью CSS, не используя <br />?

Невозможно сделать это с той же структурой HTML, вам нужно что-то, чтобы различать Hello и How are you.

Я предлагаю использовать элементы <span>, которые затем можно будет отобразить как блочные элементы (на самом деле, как <div>).

p span {
  display: block;
}

<p><span>Hello</span><span>How are you?</span></p>

Команда "\a" в CSS генерирует перевод строки. Это CSS, а не HTML, поэтому она ближе к тому, что вам нужно: без дополнительной разметки.

В приведённом ниже примере для элемента blockquote отображаются как заголовок, так и ссылка на источник, между которыми вставляется перевод строки ("\a"):

blockquote[title][cite]:after {
  content: attr(title) "\a" attr(cite);
}

Таким образом, вы можете использовать content в сочетании с атрибутами, чтобы добавить текст, организованный на несколько строк без необходимости добавления лишних элементов в вашу HTML-структуру.

В CSS используйте следующий код:

p {
  white-space: pre-line;
}

С помощью этого CSS любое нажатие клавиши "Enter" внутри тега P будет восприниматься как перенос строки в HTML. Это означает, что текст будет отображаться с сохранением всех переводов строк, добавленных в коде, что особенно полезно, если вам нужно сохранить форматирование текста.

В дополнение к ранее сказанному, вот чистое CSS-решение, которое работает:

<style>
  span {
    display: inline;
  }
  span:before {
    content: "\a ";
    white-space: pre;
  }
</style>
<p>
  Первая строка текста. <span>Следующая строка.</span>
</p>

В данном примере перед элементом <span> создаётся перенос строки с помощью псевдоэлемента :before, что позволяет добиться переноса текста на новую строку без использования дополнительных HTML-элементов.

Чтобы заставить элемент иметь разрыв строки после себя, присвойте ему:

display: block;

Нефлоатные элементы после блочного уровня будут появляться на следующей строке. Многие элементы, такие как <p> и <div>, уже являются блочными элементами, так что вы можете просто использовать их.

Однако хотя это полезно знать, в действительности это зависит больше от контекста вашего содержимого. В вашем примере не стоит использовать CSS для принудительного разрыва строки. Тег <br /> уместен, потому что семантически тег <p> является наиболее подходящим для текста, который вы отображаете. Избыточная разметка только для того, чтобы обложить её CSS, не нужна. Технически это не является точно параграфом, но тега <greeting> не существует, так что используйте то, что у вас есть. Хорошее описание вашего содержимого с помощью HTML гораздо важнее — после этого уже можно подумать, как сделать его привлекательным.