Почему новая строка сразу после элемента <p> добавляет один пробел?

У коллеги возникла проблема с выравниванием текста на экране, который я закончил. Мне показали проблему на ПК с Win10 с помощью Chrome, и некоторые строки текста выглядели так:

Text line 1.
 Text line 2 is much longer and wraps to two lines, but the second line
does not have the whitespace added.
 Text line 3 does not wrap, and has the same alignment issue.

Когда я просматривал его на своем Mac с помощью Chrome, я не видел проблемы, поэтому я гениально сделал вывод, что это, скорее всего, ошибка Win-Chrome с каким-то классом начальной загрузки и т. д.

Но, покопавшись, проблема оказалась в формате содержимого тега <p>:

<p>Text line 1.</p>
<p>
    Text line 2 is much longer and wraps to two lines, but the second line does not have the whitespace added.
</p>
<p>
    Text line 3 does not wrap, and has the whitespace.
</p>

Я знаю, что новая строка в середине строки в большинстве браузеров будет означать пробел (слава богу), так что вам не нужно добавлять конечный/начальный пробел при написании многострочного контента. Тем не менее, я никогда не видел, чтобы первоначальный возврат вызывал ведущие пробелы.

Дело в том, что может быть много кода, отформатированного таким образом, и клиент обнаружит проблемы с выравниванием при тестировании в Win10. Почему это происходит и, скорее всего, это ошибка Win/Chrome? Является ли это сознательным выбором некоторых разработчиков браузеров?

Ссылки были бы очень признательны, но лично я не смог найти ничего подходящего в документации по SO, CSS-Tricks или Chrome.

Обновлено: Другой коллега подтвердил, что добавление <br /> внутри тега <p> (без завершающих/начальных пробелов) сразу после этого генерирует один начальный пробел.

Не удалось воспроизвести. Использование Chrome на Win10.

Niet the Dark Absol 09.04.2019 20:52

У этих <p> случайно нет стиля white-space: pre;?

Alon Eitan 09.04.2019 20:54
white-space: pre-wrap вызовет поведение, которое вы описываете.
Niet the Dark Absol 09.04.2019 20:55

Я думаю, что вы, ребята, попали в самую точку со свойством white-space, и мы сузили его до какого-то странного бутстрапного наследования. Поскольку мы разрабатываем для Mac, мы не замечали этого, пока не протестировали его в Windows, и нам придется изучить, сколько сценариев это затрагивает. Рад узнать, что мне не нужно ориентироваться на win10 chrome (или переформатировать тысячи строк кода).

Dpeif 09.04.2019 21:17
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
4
4
270
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

white-space: pre-wrap сохраняет пробелы, поэтому при переносе слов дополнительный пробел не добавляется, поскольку он находится в начале абзаца.
либо попробуйте white-space: none;, либо добавьте отступ/поле, если вы хотите, чтобы весь абзац имел дополнительное пространство даже после переноса слов.

Другие вопросы по теме