У коллеги возникла проблема с выравниванием текста на экране, который я закончил. Мне показали проблему на ПК с 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>
(без завершающих/начальных пробелов) сразу после этого генерирует один начальный пробел.
У этих <p>
случайно нет стиля white-space: pre;
?
white-space: pre-wrap
вызовет поведение, которое вы описываете.
Я думаю, что вы, ребята, попали в самую точку со свойством white-space
, и мы сузили его до какого-то странного бутстрапного наследования. Поскольку мы разрабатываем для Mac, мы не замечали этого, пока не протестировали его в Windows, и нам придется изучить, сколько сценариев это затрагивает. Рад узнать, что мне не нужно ориентироваться на win10 chrome (или переформатировать тысячи строк кода).
white-space: pre-wrap
сохраняет пробелы, поэтому при переносе слов дополнительный пробел не добавляется, поскольку он находится в начале абзаца.
либо попробуйте white-space: none;
, либо добавьте отступ/поле, если вы хотите, чтобы весь абзац имел дополнительное пространство даже после переноса слов.
Не удалось воспроизвести. Использование Chrome на Win10.