justify-items не выравнивает разделённые тегом br текстовые узлы

Question

Если каждая строка обёрнута в span, то всё работает правильно, а если переносы строк сделаны через br, то весь текст центрируется единым куском. По идее br - это тег, а значит каждая строка должна обрабатываться как отдельный айтем, но почему-то этого не происходит.

Почему так и как исправить?

p {
  display: grid;
  justify-items: center;
}

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

<p>
  1234567890<br>
  1234567890 1234567890<br>
  1234567890
</p>

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

А вам не кажется что это логично?

Нет. Flex и grid считают текстовые ноды своими айтемами (впрочем, последовательные текстовые ноды объединяются в один айтем), но br - это тег, а значит я ожидаю, что он разделяет ноды. Добавил в пример аналогичный код, но вместо <br> стоит <span></span> всё так же между нодами - в таком варианте всё работает ожидаемым образом.

PS: Надо для этого.

Answer 1

Не знаю, почему, но помогает (как оказалось, в FF не работает):

br {
  content: "";
}

p {
  display: grid;
  justify-items: center;
}

br {
  content: "";
}

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

<p>
  1234567890<br>
  1234567890 1234567890<br>
  1234567890<br>
</p>

Answer 2

Всё дело в том, что br создаёт переполнение по ширине, когда текст сам переходит на следующую строку, когда как обычный текст переходит на следующую строку только когда достигнет конца внешнего элемента.
А у flex центрирование идёт элементов, а не текста внутри элемента и пока элемент не достиг максимальной ширины внешнего контейнера, он центрирует, а как только достигнет максимальной ширины, перестаёт этот закон действовать и поэтому когда центрируете текст внутри flex элемента, лучше всегда писать text-align: center на случай перехода текста на следующую строку.
В примере ниже я сделал второй блок со span, но сделал переполнение по ширине и как видите он себя ведёт так же как и br. Просто как в начале писал span упёрся в ширину внешнего элемента и создал вторую строку, а br сам создал вторую строку игнорируя внешнюю ширину.

p {
  display: grid;
  justify-items: center;
}
.centered {
  text-align: center;
}

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

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

<p>
  1234567890<br>
  1234567890 1234567890<br>
  1234567890
</p>

<p class="centered">
  1234567890<br>
  1234567890 1234567890<br>
  1234567890
</p>

БЛОГ НА HUSL

justify-items не выравнивает разделённые тегом br текстовые узлы

Ответы (2 шт):