Как делать вёрстку текста без BR?

Question

[Johny Smith]

Как сделать вёрстку блоков по 4 строки, без использования BR в конце каждой строки, не сужая ради этого блоки (потому что в разных OS текст может отрисовываться по разному, и некоторые слова изза этого могут перенестись на другие строки, а это уже не pixel perfect):

Answer 1

[Юрий]

ни br ни p лучше не использовать - иначе responsive не добиться

Comments

[Монти Пайтон]

<p> 
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</p>
<p> 
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</p>

а если так :)

[Юрий]

Ostin1, и что это даст?

[Монти Пайтон]

Юрий, ниже пользователь с ником Толстый Лорри тоже сделал похожим образом, только ещё добавил CSS

Answer 2

[Толстый Лорри]

Вообще, пиксель-перфект для текста - это ужасная идея.

Так или иначе, семантика страницы не должна страдать из-за прихотей дизайнера. Желаемого можно добиться через:

.shitty-line::after {
    content:'\a';
    white-space: pre;
}

<p>
    <span class="shitty-line">...</span>
    <span class="shitty-line">...</span>
    <span class="shitty-line">...</span>
    <span class="shitty-line">...</span>
</p>

Answer 3

[Ruslan Ruslanov]

костыль, но...
можно сделать через flex.
https://html5book.ru/css3-flexbox/

Answer 4

[Jan van Eyck]

Если подобрать оптимальную ширину блоков не позволяет только опасения по поводу различного рендеринга текста в разных браузерах/платформах - то это слабый аргумент против такого варианта :) Потому что различия будут незначительными - ничего не поломается.

<br>и правда моветон, рудимент из первобытных html-времен. А-ля флоат.